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Prólogo 


PRÓLOGO 


La creación de nuestros propios sitios web resulta una tarea muy creativa y apasio- 
nante, en la que podemos aplicar todo nuestro gusto, intuición y criterio visual. Pe- 
ro, además de desplegar nuestro sentido de la estética y de la didáctica, también de- 
beremos implementar criterios de organización y planificación, para establecer ob- 
jetivos y determinar el mejor modo de comunicarnos con el público objetivo (o tar- 
get) de los sitios web que desarrollemos. Un seguimiento correcto de todas estas eta- 
pas iniciales nos permitirá desarrollar sitios sumamente profesionales. 

Quien se encargue del diseño y la publicación de sitios web debe tener en claro en 
todo momento la meta final del producto, ya que esto será lo que lleve a definir to- 
dos los restantes factores, como el diseño mismo (colores, logotipo, tipografías, es- 
tilos, formas, diagramación) o la elección del método de publicación (servicios de 
alojamiento, servidor web propio, promoción, etc.). 

Un diseñador web, además, debe actuar como desarrollador e implementador de to- 
das estas soluciones, para que el cliente final y los visitantes de sus sitios queden sa- 
tisfechos. El diseñador no tendrá que buscar una respuesta general a todas las pro- 
blemáticas decisiones que se presenten, sino que tendrá que definir diferentes y es- 
pecíficos métodos para ofrecer un abanico de soluciones posibles. 

Para lograr óptimos resultados, no sólo debemos conocer los procesos sino que ne- 
cesitaremos dominar las herramientas, servicios y complementos que Internet nos 
ofrece para sacarle el mayor provecho. 

El software de diseño web, como los editores HTML o los programas de edición de 
imagen digital, serán de gran ayuda para el desarrollo de nuestros sitios y sus com- 
ponentes. Es fundamental, también, tener un conocimiento acabado de los servicios 
que hay disponibles en Internet para el registro de dominios, el alojamiento de nues- 
tro sitio y su promoción a través del alta en buscadores o el intercambio de enlaces. 
Este libro propone un abanico de soluciones fundamentales para el desarrollador de 
sitios web profesionales. Para ello se tendrán en cuenta dos criterios a la hora de se- 
leccionar las herramientas y definir los procedimientos: la simplicidad y el menor 
costo. De todas maneras, dentro de la evaluación de todos estos componentes, se ha 
priorizado la calidad del producto final para luego aplicar la evaluación de costo y 
facilidad. Es por eso que no todas las herramientas son gratuitas, ni tampoco pode- 
mos decir que todos los procedimientos y ejemplos serán sencillos de implementar. 
Pero desde luego, si se presta atención y se tienen en cuenta todas las alternativas 
ofrecidas, el recorrido por este libro será ameno, entretenido y sin mayores incon- 
venientes en la puesta en práctica. 

No resta más que desearles un seguro éxito en la creación de sus propios sitios web. 


Pablo Eduardo Vázquez 


pabloevazquezOgmail.com 
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EL LIBRO DE UN VISTAZO 


Este libro está dirigido a quienes deseen inciarse en el desarrollo de sus sitios 
web, así como a aquellos usuarios intermedios que deseen adquirir una visión to- 
tal del proceso de producción, conociendo y aplicando herramientas variadas. 


Capítulo 1 
CONOCIMIENTOS PREVIOS 


A modo de introducción, trataremos los temas 
primarios y todos los conocimientos que, de 
antemano, debemos abarcar para tener claro 
todo lo que se refiera a Internet, que será la 
herramienta más utilizada durante la lectura 
de este libro. Profundizaremos también todas 
las áreas que vinculan esta gran red al diseño 
y la creatividad, como la World Wide Web y los 


protocolos de comunicaciones respectivos. 


Capítulo 2 
PLANIFICACIÓN Y PRODUCCIÓN DEL SITIO 


Para lograr diseños óptimos de sitios, será 
necesario tener en cuenta una serie de 
factores y procesos previos al diseño mismo. 
Entre ellos, se destacan la planificación del 
sitio, que incluirá puntos como la definición 
de objetivos y la dirección artística, y, por otro 
lado, el hecho de comenzar a conocer la 
estructura básica de una página web a través 


de su costado más puro: el lenguaje HTML. 


Capítulo 3 
IMAGEN Y ANIMACIÓN 


Si deseamos que nuestros sitios sean 
visualmente atractivos y gráficamente 
óptimos, necesitaremos optimizarlos 
mediante el adecuado procesamiento de las 
imágenes que incluiremos. Para ello, 
debemos conocer todas las alternativas en 
cuanto a formatos, como también una 


herramienta que nos permita modificar sus 


propiedades para lograr una mejor calidad y 
diversos efectos. Utilizaremos Fireworks, el 


poderoso editor gráfico de Macromedia. 


Capítulo 4 
DREAMWEAVER BÁSICO 


En este capítulo hemos llegado por fin al 
diseño formal de nuestros sitios. 
Analizaremos una de las aplicaciones más 
potentes para diseño web: Macromedia 
Dreamweaver. Conoceremos todas las 
características del programa y las tareas 
básicas de trabajo a través de los contenidos 
explicados y del análisis de un proyecto 


simple de creación de páginas web. 


Capítulo 5 
DREAMWEAVER AVANZADO 


Para desarrollar sitios web sumamente 
profesionales, será de vital importancia la 
lectura de este capítulo. Ahondaremos en las 
opciones más avanzadas de Dreamweaver, 
analizando en primer término la alternativa 
de programación en HTML de cada una de las 
herramientas que podemos llegar a incluir en 
nuestras páginas. Entre ellas, tablas, capas, 


marcos, imágenes, CSS, etc. 


Capítulo 6 
PUBLICACIÓN DE SITIOS 
Al terminar la planificación y la 
implementación del diseño y de todos sus 
elementos, llegará la hora de verlos 


publicados en la Web. En este capítulo, 


USERS 


veremos todas las opciones disponibles para 
ello, incluyendo el montaje de un servidor 
propio, el registro de dominios regionales, la 
contratación de servicios de alojamiento y 


diferentes métodos de redirección. 


Capítulo 7 


MACROMEDIA FLASH Y OTRAS 
HERRAMIENTAS 

Contamos con muchas alternativas 
adicionales para incluir en nuestros sitios 
web. Mediante la lectura y puesta en práctica 
de los contenidos de este capítulo, podremos 
lograr conocer más acerca de todas ellas. 
Desde la inclusión de animaciones y 
complejas aplicaciones mediante Flash, hasta 
otros componentes extra en Java, PHP o ASP, 
serán sencillamente explicados y 


funcionalmente aplicados. 


Capítulo 8 
PUBLICIDAD DEL SITIO 


Una correcta promoción para nuestras 
páginas será fundamental a la hora de 
conseguir nuevos visitantes y potenciales 
clientes. Contamos con muchas opciones para 
lograrlo, dentro de las cuales se destaca el 
indexado en los buscadores más importantes 


de la Web, como Google o Yahoo!. También 


El libro de un vistazo 


analizaremos alternativas para lograr 
mantener nuestros asiduos visitantes, como 
el envío de boletines electrónicos o el 


intercambio de banners publicitarios. 


Apéndice A 
BASES DE DATOS 
La inclusión a nuestro servidor web de un 
servidor de bases de datos puede ser una 
tarea muy útil y funcional para la 
interactividad con los usuarios de nuestros 
sitios web. Esta opción puede ofrecer una 
gran versatilidad en cuanto a opciones de 
registro y seguridad en los datos remotos, y lo 
podemos lograr mediante MySQL Server, 
gestor y administrador de bases de datos 


gratuito, estable y potente. 


Apéndice B 
SITIOS Y PROGRAMAS RECOMENDADOS 
Servicios de alojamiento web, obtención de 
recursos, como fuentes tipográficas, templates 
gráficos o iconos e imágenes para la Web. La 
descarga de herramientas gratuitas para la 
ejecución de diferentes tareas, como creación 
de animaciones o clientes FTP. Todo esto 
podremos conseguirlo mediante el listado de 
sitios recomendados que se ofrecen en este 


segundo apéndice. 


EN INFORMACIÓN COMPLEMENTARIA 


A lo largo de este manual encontrará una serie de recuadros que le brindarán información com- 


plementaria: curiosidades, trucos, ideas y consejos sobre los temas tratados. 


Cada recuadro está identificado con uno de los siguientes iconos: 





CURIOSIDADES ATENCIÓN 
E IDEAS 
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UNA NUEVA DIMENSIÓN 





Pai A al AMOO" 


Aquí encontrará diferentes 
tutoriales en video relacionados 
con el libro. Sólo deberá hacer 
un clic en Ver Tutorial para 
bajar el video a su PC. 


Una completa guía con sitios 

web, para acceder a más 
información y recursos útiles 
que le permitirán profundizar 
sus conocimientos. 


Las mejores aplicaciones 
y herramientas 
accesorias, ejemplos y 
listados del libro para que no 
tenga que invertir su tiempo en 
transcribirlos. 


OnWeb, el sitio que le permitirá aprovechar al máximo cada uno de 
nuestros libros, con contenido exclusivo: la mejor selección de software y 
los ejemplos analizados en el texto, tutoriales en video y una completa 
guía de sitios de Internet. > Además, un foro a través del cual podrá 
realizar interconsultas con otros lectores y usuarios, debatir con ellos y 
estar en contacto con la editorial. Como siempre, MP Ediciones, a la 
vanguardia en la divulgación de la tecnología. 


BIENVENIDO A LOS SERVICIOS EXCLUSIVOS DE ONWEB: 


Ingrese al sitio usershop.mpediciones.com. La primera vez que 
acceda, deberá registrarse con un nombre de usuario y una clave. 
Para completar el proceso de registro, se le hará una pregunta 
referida al libro y se le solicitarán sus datos personales. 


USERSHOP.MPEDICIONES.COM | 
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INTRODUCCIÓN 


El objetivo de este libro es brindar, tanto al lector novicio como al usuario inter- 
medio —que ya ha hecho sus primeras armas en esta actividad—, un amplio reco- 
rrido por el proceso de desarrollo de sitios web. Con un claro enfoque práctico, 
nuestra misión será que el lector adquiera los conocimientos necesarios para pla- 
near, diseñar, publicar y promocionar sitios web de manera sencilla, organizada y 
con el menor costo posible. 

En el primer capítulo, tendremos un panorama de los conceptos básicos, tanto 
del diseño y la creatividad en la presentación de los contenidos, como de las ca- 
racterísticas técnicas de Internet, sus protocolos de comunicaciones o la World 
Wide Web, entre otros temas. 

Luego, abordaremos el proceso previo de planificación del sitio y tomaremos con- 
tacto con un aspecto esencial de nuestra actividad, el lenguaje HTML en que se 
codifican o construyen los sitios web. En adelante, sin embargo, usaremos mayor- 
mente las herramientas de diseño más difundidas (Dreamweaver, Fireworks y 
otras), que nos permiten obtener resultados de alto profesionalismo, sin necesi- 
dad de mayor dominio de programación. Muchos lectores, seguramente, ya esta- 
rán familiarizados con algunas de ellas. 

Como el formato HTML, con que se estructuran los sitios web, sólo despliega 
texto, el siguiente paso será comenzar a preparar los elementos visuales que acom- 
pañarán al texto (imagen y animación). Conoceremos las características y los for- 
matos más convenientes para su utilización en la Web y comenzaremos a aplicar 
Macromedia Fireworks para la edición de esas imágenes. 

Entrando de lleno en la etapa práctica del armado de un sitio web, en los capítulos 
4 y 5, comenzaremos a utilizar Macromedia Dreamweaver para estructurar nuestro 
sitio, con todos los contenidos que hemos seleccionado y organizado de manera 
previa. Aquí es donde empezaremos a ver los resultados prácticos de nuestro apren- 
dizaje. De lo básico a lo avanzado, iremos viendo las diferentes herramientas y op- 
ciones que nos brinda Dreamweaver para dar forma y estilo a nuestro sitio. 

Una vez que el contenido ha adquirido forma, nos encontramos en el momento 
crucial de publicar nuestro sitio. En el capítulo 6 veremos cómo realizar esta vi- 
tal tarea, resolviendo los distintos requerimientos, como el registro del dominio y 
el alojamiento del sitio. 

Acercándonos al final, abordaremos algunas herramientas importantes para la 
animación e interactividad del sitio, haciendo especial énfasis en la utilización de 
Macromedia Flash. Y, por último, aprenderemos los distintos modos de difundir 
y promocionar nuestros sitios, a través de distintas opciones, como la inclusión 
en buscadores o el intercambio de enlaces. 
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Conocimientos 
previos 


En este primer capítulo empezaremos 

a conocer mucho más acerca de Internet 
y todas las caracteristicas que se nos 
ofrecen a partir de este estupendo 
método de comunicación. lambién 
repasaremos los conceptos de protocolos 
más utilizados, los servicios 


y los componentes de este tipo de red. 
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¿QUÉ ES INTERNET? 


Internet es un sistema mundial de computadoras en red integrado por las redes y su- 
bredes de cada país, que comparten diferentes clases de recursos y permiten comuni- 
carse y acceder a los datos de cualquier computadora que esté conectada a ellas, e in- 
cluso establecer comunicaciones directas con los usuarios de todas estas terminales. 
Internet se basa en un sistema de cliente-servidor. Los clientes son los usuarios 
que aprovecharán los recursos y los servidores los equipos que los ofrecen y ad- 
ministran. Es una manera rápida, inteligente y de bajo costo, por lo que actual- 
mente se ha convertido en el medio de comunicación y obtención de datos más 
utilizado en el mundo entero. 

El proyecto de Internet nació de la mano de ARPA (Advanced Research Projects 
Agency) en Estados Unidos, alrededor del año 1969. Inicialmente se la conoció con 
el nombre de ARPAnet, y su objetivo principal fue permitir una comunicación rá- 
pida y eficaz entre los investigadores de la agencia. 

Hoy en día, Internet es un sistema de comunicación público, cooperativo y autosu- 
ficiente económicamente. A nivel técnico, se distingue porque basa su funciona- 
miento en un protocolo de transmisión de datos veloz y seguro: el TCP/IP. 


Solicitud [| 


Archivos 


E A. i i (FTP) 
0 Servidores [| |] 
(navegador, cliente FIP Respuesta (servicios) 


cliente de correo, etc. E-mail 
(POP y SMTP) 





Figura 1. En este diagrama se muestra el funcionamiento 
básico del sistema cliente-servidor que utiliza Internet. 


Breve historia de Internet 

A comienzos de la década del 60, el Departamento de Defensa de los EEUU co- 
menzó a preocuparse por el sistema utilizado en las comunicaciones internas. En 
1962, un investigador del gobierno llamado Paul Baran presentó un proyecto 
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que solucionaba satisfactoriamente todos los problemas que se presentaban con 
el método de comunicación utilizado. Era un sistema de computadoras conecta- 
das entre sí por una misma red de manera descentralizada. 

Este proyecto fue debatido durante varios años mientras se analizaban las ventajas 
y desventajas que podría significar, hasta que en 1969 la ARPA del Pentágono creó 
la ARPAnet, el primer sistema de computación con equipos conectados en red. 
Este sistema funcionó satisfactoriamente durante varios años con su implemen- 
tación en redes pequeñas, es decir, con pocas estaciones de trabajo conectadas a 
ella. El problema surgió cuando se intentó masificar 
el uso de este método: no existía un protocolo de co- 
municaciones común en todas las computadoras ya 
que utilizaban distintos sistemas operativos. 
Finalmente, en el año 1978 se creó el protocolo TCP/IP 
(Transmition Control Protocol/Internet Protocol). Desde 
ese momento se comenzó a utilizar el término Internet. 
Este protocolo fue inmediatamente adoptado como es- 
tándar por el Departamento de Defensa, y en 1982 su InfoWay 
red de computadoras adoptó el nombre de MILnet. 


Figura 2. Existen muchos equipos que actúan como 
servidores web y de otros servicios de Internet sin tener 





grandes prestaciones. 


En 1987, la NSF (National Science Foundation) decidió enlazar cinco centros en dis- 
tintas ciudades de los EEUU. De esa manera nació la NSFnet, que alcanzó la velo- 
cidad de transferencia de 1,5 Mbps (el máximo hasta ese momento era de 56 Kbps, 
la velocidad que actualmente ofrecen los módems de conexión telefónica). 

En la década del 90 se creó la World Wide Web mediante la utilización de tres 
novedosos recursos: el lenguaje HTML (Hipertext Markup Language), el HTTP 
(Hypertext Transfer Protocol) y un programa cliente (navegador o browser). 

En el año 1993, dos desarrolladores del NCSA (Nacional Center Supercomputing Apli- 


cations) elaboraron un sistema de navegación web y se alejaron de esa compañía para 


i OTROS PROTOCOLOS 


Internet ofrece una gran cantidad de servicios. Cada uno de ellos se asocia con un puerto de comu- 
nicación diferente. Entre los más usados encontramos el correo electrónico [puerto POP para la en- 
trada de datos y SMTP para la salida), la mensajería instantánea [cada mensajero utiliza el puerto 
sobre el que funciona su red) y el que nos importa a nosotros: la Web (comúnmente el puerto 80). 
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apostar todo a la creación de una de las primeras empresas dedicadas exclusivamente a 
este rubro: Netscape. Éste fue uno de los primeros navegadores web del mercado. 
Alrededor del año 1995, el número de servidores web, es decir, supercomputadoras 
que alojaban sitios web, superó la cantidad de servidores FT'B, por lo que creció 
mucho más el uso de esta tecnología, hasta que logró convertirse en lo que es ac- 
tualmente: la mayor red mundial de datos del planeta. 

Posteriormente se creó la Internet Society, un ente regulador de contenidos y acti- 
vidades para esa gran red. Según este organismo, hoy en día el tráfico de Internet se 
triplica cada dos meses y alcanza a más de 200 países. 


La conexión 

Aunque para poder crear nuestra propia página y montar un servidor web sería nece- 
sario que ya contáramos con una conexión a Internet y con conocimientos básicos so- 
bre esta red y sobre informática en general, repasaremos los conceptos mínimos acer- 
ca de las diferentes clases de conexiones que 
existen y sus principales características. 
Básicamente, en el mercado contamos con 
dos tipos de conexiones a Internet, que 
son las más utilizadas hoy en día. 

El primer tipo es la conexión dial-up, que 
se realiza mediante la línea telefónica. Para 
ello, debemos contar con un dispositivo de 
hardware especial denominado módem, 
que puede ser de dos tipos: interno (se ins- 
tala dentro del gabinete en un slot de ex- 
pansión de la placa madre) o externo (que- 
da fuera de la computadora y se conecta a 
algún puerto del gabinete, que últimamen- 
te es el USB). Un módem de acceso telefó- 
nico presenta dos conectores: uno para co- 
Figura 3. Ejemplo de un módem dial-up nectar el cable de la línea telefónica (LINE) 
de 56 Kbps interno. y otro para enchufar el teléfono (PHONE). 





La palabra módem es una simplificación de los términos modulador/demodu- 
lador, lo que indica de manera resumida la funcionalidad de este componente. 
La operatoria de un módem se sintetiza en la codificación y decodificación de 
datos para transmitirlos como bits por la línea de voz del cable de teléfono. 

Este tipo de conexiones es uno de los más primitivos, y debido a que la línea telefónica no po- 
see una alta tecnología, tienen una velocidad lenta en la transferencia de datos y un bajo nivel 


de seguridad. La velocidad máxima alcanzada en conexiones díal-up es de 56 Kbps. 
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En una conexión telefónica, el módem utiliza el tono de marcado para estable- 
cer la conexión y se necesita contar con un nombre de usuario y contraseña, que 
son proporcionados por nuestro ISP (Internet Service Provider, es decir, provee- 
dor de servicio de Internet). 

El segundo tipo de conexión a Internet es la conexión de banda ancha, que también 
utiliza un módem para establecer la comunicación (normalmente externos). Estas 
conexiones brindan más seguridad y una mayor velocidad de transferencia de datos. 


Existen diferentes variantes. La 
más utilizada en conexiones hoga- 
reñas se establece (al igual que las 
dial-up) mediante la línea telefóni- 
ca y es llamada DSL (Digital Sus- 
criber Line) o ADSL (Asymmetric 
Digital Subscriber Line). A diferen- 
cia de las conexiones por línea tele- Figura 4. Fotografía de un módem DSL externo. 
fónica tradicionales, en las cone- 

xiones ADSL se aplica a la línea telefónica un proceso de digitalización que per- 
mite estas altas velocidades. Actualmente, el estándar de velocidad de estas cone- 


xiones fluctúa entre los 256 Kbps y los 2 Mbps. 





LA WORLD WIDE WEB 


Sin dudarlo, se puede decir que el recurso más utilizado en el ámbito de Internet es la 
World Wide Web, comúnmente denominada Web. Se trata de un sistema de hiper- 
texto que funciona sobre la gran red de redes. Como ya dijimos, Internet y todos sus 
servicios funcionan principalmente a través de un sistema de clientes y servidores. En 
el caso de la World Wide Web, el funcionamiento es de la misma manera. Para expli- 
carlo de forma sencilla y resumida, los servidores web serán los que alojarán las diferen- 
tes páginas de cada sitio junto con sus componentes (imágenes, animaciones, aplica- 


i CONEXIONES DE BANDA ANCHA 


Existen también otras variantes para conexiones de banda ancha, quizá más utilizadas en em- 
presas y redes más grandes. Se trata del cablemódem y las conexiones satelitales. En el primer 
caso, los datos son enviados y recibidos a través del cable coaxil de TV por cable, y en el segun- 
do, se necesita una antena para conectarse satelitalmente con el proveedor (ISP). 
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ciones, etc.). El cliente web será el que consumirá todos esos recursos brindados por los 
servidores. Para eso, el cliente web debe contar con un software que interprete y per- 
mita visualizar las páginas web. Estos programas, denominados navegadores web o 
browsers, nos dan la posibilidad de recorrer las diferentes páginas de un sitio web a tra- 
vés de los links (también llamados vínculos o enlaces) y mediante un método de re- 
solución de nombres (DNS) que explicaremos más adelante. Ya hemos aclarado que 
para que el servicio web funcione debemos contar con algunos factores imprescindi- 
bles. Ordenemos un poco estos conceptos y veamos las características y relevancia que 
posee cada uno. Como primer eslabón, encontramos los servidores que contienen si- 
tios web constituidos por páginas web, imágenes y diferentes componentes adicionales 
que las conformarán. Como contrapunto, encontramos al cliente web, que debe con- 
tar con una conexión a Internet y un navegador para explorar las diferentes páginas de 
los múltiples sitios de la World Wide Web. 

Ahora que tenemos en claro los niveles y elementos que constituyen y con los que 
deben contar un cliente y un servidor web, analicemos cada uno de ellos. 
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Figura 5. Internet Explorer es uno de los navegadores web más populares del mercado. 


nm EL E-MAIL 


El correo electrónico o e-mail es un servicio que se brinda a través de grandes redes y también a 
través de Internet. Es un sistema de envío y recepción de mensajes de texto e hipertexto pero no per- 
teneciente a la World Wide Web, ya que utiliza protocolos diferentes para establecer las comunica- 
ciones. En los mensajes de correo electrónico también podemos adjuntar imágenes y archivos. 
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Los sitios web 

Un sitio de la Web en un conjunto de documentos electrónicos de hipertexto (páginas 
web) que componen y hacen referencia a un tema determinado. Normalmente están 
definidos por una página de bienvenida (home page), que será la que se muestre inicial- 
mente y desde la que se podrá acceder a las demás páginas mediante enlaces (#nks). 
Los sitios web poseen un nombre de dominio particular que se conoce popularmen- 
te como dirección de Internet. Como ya debemos saber, en una red TCP/IP cada 
equipo es identificado por un número IP, que puede ser dinámico (cambia en cada 
inicio de sesión) o estático (es siempre la misma). Generalmente, en las conexiones 
dial-up y en las de banda ancha para usuarios hogareños la IP suele ser dinámica. En 
cambio, en los servicios que se brindan a empresas, estas direcciones son estáticas (o 
fijas) porque es más común que en este ámbito se brinden servicios y, por esa razón, 
es necesario que la máquina se identifique siempre de la misma manera para poder 
encontrarla dentro de Internet y así acceder a sus servicios (sitios web, e-mail, etc.). 
Siguiendo este criterio, cuando deseamos acceder a un sitio de la Web, tendría- 
mos que indicar a nuestro navegador el número de IP del servidor que aloja a ese 
sitio. Aquí se nos plantea el primer inconveniente: ¿no sería demasiado comple- 
jo memorizar una enorme cantidad de datos numéricos? La solución nació a par- 
tir de la implementación de un sistema de resolución de nombres: el DNS (Do- 
main Name System), que traduce cada nombre de dominio a la dirección IP aso- 
ciada a partir de una tabla de registros. Este nombre de dominio o URL es mu- 
cho más fácil de recordar para nosotros, y es de esta manera que le indicamos a 
nuestro navegador el sitio al que queremos acceder. 

Pero si no tuviésemos una IP fija, podríamos usar otra modalidad de DNS lla- 
mada DDNS (Dynamic DNS). Este DNS dinámico se encarga de actualizar la 
tabla de asociaciones cada vez que la IP cambia. Generalmente, este servicio es 
prestado por empresas que proveen un programa que, al instalarse en la compu- 
tadora, envía de forma automática la nueva dirección IP. 

Las direcciones de Internet están compuestas por varios elementos. Tomemos el ejem- 
plo de http://www.google.com.ar. El prefijo http:// indica al navegador el puerto que 
se usará para acceder al sitio. Actualmente los navegadores reconocen automáticamen- 
te este comando, por lo que es posible obviarlo. Entonces, la dirección de Internet que- 


nm MÚLTIPLES DOMINIOS 


El sistema de DNS también es muy útil para asignar diferentes nombres de dominio a una misma 
IP, es decir, que en un mismo servidor podemos alojar varios sitios web, pero en diferentes directo- 
rios del servidor. Por ejemplo, si en nuestro servidor tenemos una carpeta que se denomina sitio 


principal y otra sitio secundario, podremos aplicar un nombre de dominio a cada una de ellas. 
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daría como www.google.com.ar. Posteriormente encontramos la sigla www, que acla- 
ra al browser que el sitio en cuestión pertenece a la World Wide Web. Luego se indica 
el nombre en sí del sitio, que es a elección de su administrador. En este caso, google. 
Por último, encontramos los sufijos .com y .ar. El primero establece la categoría del si- 
tio, es decir, qué tipo de usuario u organización lo posee. En el caso del .com se entien- 
de que es una empresa comercial, pero existen otros sufijos, como .org (organizaciones 
sin fines de lucro), .edu (educación), .gov (entidades gubernamentales), .mil (entida- 
des militares), etc. El último sufijo hace referencia al país donde se encuentra el servi- 
dor web que aloja al sitio. Es así que .ar representa a la Argentina, «mx a México, «br 
a Brasil, .es a España, .it a Italia o «cl a Chile, entre otros. Es muy posible también que 
encontremos sitios sin este último sufijo, como, por ejemplo, www.hotmail.com, lo 
que indica que este sitio no pertenece a ningún país en particular. 


2 Welcome to the UN. It's your world. - Microsoft Internet Explorer 
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Figura 6. Las organizaciones, como las Naciones Unidas, 
utilizan sufijo .org para publicar sus sitios. 


o LAS DESCARGAS 


Una descarga o download es una interacción, entre el servidor web y el cliente, que nos permite ex- 
traer archivos desde aquel hasta nuestro equipo mediante el protocolo HTTP sin la necesidad de 
contar con el servicio de FTP (aunque éste es bastante más veloz en la descarga). Esto se realiza me- 
diante un clic en un enlace que hace referencia a un archivo ubicado en el servidor. 
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Las páginas web 

Cada página que compone un sitio web puede estar conformada por diferentes 
elementos que hacen de ella un documento mucho más atractivo, tanto en su as- 
pecto visual como en sus contenidos. Dentro de Internet podemos encontrarnos 
con páginas con todo tipo de componentes, como imágenes, animaciones, ele- 
mentos dinámicos como menús desplegables o barras de navegación y aplicacio- 
nes complementarias, como plugins y applets que realizan diferentes funciones 
(en capítulos posteriores analizaremos cada uno de estos elementos). 


Ed 
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Figura 7. Muchos sitios web nos ofrecen diferente calidad 
de servicios, como, por ejemplo, los foros de discusión. 


Las páginas de hipertexto convencionales son documentos electrónicos con for- 
mato HTML, que es el lenguaje básico por el cual se desarrollan (o programan) 
las páginas. Este formato soporta dos extensiones para sus archivos: HTML y 
HTM, por lo que la página de inicio de nuestro sitio quedaría nombrada, por 


MM OTROS FORMATOS 


Existen también otros formatos [de los que hablaremos en capítulos posteriores con mayor 
profundidad) que son aceptados e interpretados por los servidores web y los clientes [navega- 
dores), como los ASP, PHP, CGI o XML. Éstos son páginas web desarrolladas con diferentes 


lenguajes de programación. 





21 


CREACIÓN DE SITIOS WEB 


ejemplo, como inicio.html. Es conveniente aclarar que la mayoría de los servi- 
cios que mantienen servidores web aceptan como nombre de página inicial los 
nombres de archivo index o default. Igualmente, más adelante comprenderemos 
más acerca de los servidores web y su contenido. 

Además del texto tradicional, imágenes y contenidos dinámicos, una página web 
suele contener lo que normalmente se llama link o hipervínculo. Estos pueden 
ser representados por texto o imágenes y su función es dar acceso directo a otra 
página del mismo sitio o a una de otro diferente. La primera clase se denomina 
link con vínculo interno, y tiene la referencia a una página ubicada dentro del 
mismo servidor que la que estamos visualizando. La segunda da acceso a un sitio 
externo o a alguna de sus páginas. Un link también pude hacer referencia directa 
a la creación de un mensaje de correo electrónico, pero esto depende del servicio 
de correo que esté configurado como predeterminado en el equipo cliente (en 
Windows, generalmente es Outlook). Lo primordial que hay que tener en cuen- 
ta con respecto a las páginas web, es su organización dentro del sitio, que será de- 
finida por el mapa del sitio que tengamos en mente. 


EL NAVEGADOR 


Técnica y prácticamente, un navegador web (también llamado browser) es una 
aplicación que se instala en la computadora del cliente y que, mediante una co- 
nexión a Internet, permite acceder a todos los sitios de la red mundial y así vi- 
sualizar páginas de hipertexto estáticas y dinámicas. 

Como ya dijimos, las páginas web pueden contener contenidos de todo tipo, como 
texto plano, links, imágenes, animaciones, secuencias de audio y video y aplicaciones 
de todo tipo, y para que éstos puedan ser visualizados y ejecutados adecuadamente, el 
navegador web debe contar con los soportes necesarios para cada tipo de dato digital. 
Un factor fundamental en la navegación de sitios web son los links, ya que a través 
de ellos podremos acceder a otras páginas, volver a la anterior, enviar mensajes de 
correo electrónico, iniciar descargas y algunas tareas complementarias más. 


mm CARACTERÍSTICAS ADICIONALES 


Un navegador web también nos da la posibilidad de marcar páginas web para acceder de manera 
más facil posteriormente. Estos accesos son denominados marcadores, bookmarks o favoritos. 
Otra característica de los navegadores es la de poder acceder a todas las páginas visitadas ante- 


riormente en un período determinado de tiempo. Esta función normalmente se denomina historial. 
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La comunicación entre el navegador web del cliente y el servidor web de Inter- 
net se establece mediante el protocolo HTTP, aunque en la mayoría de los ca- 
sos también se soportan otros protocolos adicionales, como el FTP, el Gopher y 
el HTTPS (versión cifrada y más segura del HTTP). 

Entonces, podemos decir que la función básica de un navegador es mostrar en 
pantalla documentos HTML (páginas web) alojados en servidores web. Actual- 
mente, los navegadores poseen la capacidad de interpretar también la renderiza- 
ción de imágenes y animaciones, la reproducción de audio y video en tiempo real 
(streaming), y la ejecución de diversos progra- 
mas y scripts en diferentes formatos y median- 
te diversos protocolos. 


Figura 8. Internet Explorer y Mozilla Firefox son las 





opciones más difundidas entre los navegadores. 


En cuanto a las diferentes opciones que se nos presentan a la hora de instalar un 
navegador, todo dependerá del sistema operativo que utilicemos. En este libro 
nos centraremos en el uso de Windows XP Profesional, y las variantes que ma- 
nejamos son varias: Opera, Firefox, Amaya, etc., pero la que se presentará como 
ejemplo en todos los ejercicios y explicaciones es la más popular y fácil de usar 
de todas: Internet Explorer (ya incluido con Windows). 

Este programa fue producido por Microsoft en el año 1995 y su primera versión fue 
lanzada con la versión de Windows de ese año (Windows 95). Desde ese entonces, 
Windows se estableció en el mercado como el sistema operativo estándar y, junto a 
ello, Internet Explorer también se convirtió en el líder en popularidad. 

Con cada nueva versión de Windows lanzada al mercado, se incluyó también una 
de Internet Explorer, que llega hasta la versión 7.0 que es incluida con Windows 
Vista. La versión que utilizaremos en este libro es la más estable, funcional y versá- 
til de todas: Internet Explorer 6.0 incluida con Windows XP, que más adelante co- 
noceremos y analizaremos de forma más profunda. 


El protocolo HTTP y las transacciones de datos 

Como ya explicamos, el protocolo utilizado para el acceso, visualización y nave- 
gación web es el denominado HTTP. Su última versión es la 1.1, y su funciona- 
miento de conexión es simple, ya que se basa en redes cliente-servidor. Cuan- 
do el usuario ingresa una dirección de Internet (por ejemplo, http://www.my- 
daemon.com) en su navegador (cliente web), realiza una petición de datos. El 
protocolo http primero resolverá la configuración DNS establecida en Internet 
que corresponde a ese dominio, para poder establecer cuál es el número de IP 
asociado con esta dirección, por ejemplo, 64.226.24.116. Una vez resuelto esto, 
intentará establecer la comunicación con dicho servidor mediante el puerto pre- 
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determinado de la Web, es decir, el puerto 80. Cuando se ha establecido esa co- 
nexión, se envía la petición al servidor para que se muestre la página solicitada 
en el navegador del cliente. Para eso se le indica al servidor web los datos nece- 
sarios para la transferencia de los datos, como el número de IP o la página que 
se desea visualizar (si el cliente no especificó ninguna en particular, se mostrará 
la página establecida como inicial en el servidor web de dicho sitio). Con todos 
los datos resueltos, el servidor web enviará la respuesta al cliente remoto, mos- 
trando la página correspondiente en su navegador. 

Una característica muy importante del protocolo HTTP es que no cuenta con la 
posibilidad de almacenar datos sobre las conexiones, por lo que cuando una 
transacción de petición/envío de datos finaliza, los datos que se establecieron se 
perderán. La solución a este conflicto se realiza mediante las cookies. Se trata de 
archivos pequeños que se almacenan en la máquina del usuario cliente y en el 
servidor web, y guardan toda la información recopilada con respecto a los usua- 
rios (login, contraseñas, etc.), lo que sirve para que cuando ingresemos nueva- 
mente en ese sitio, seamos reconocidos por él. 


Internet Explorer 

Como ya vimos, para la navegación por Internet (y también para testear nues- 
tras páginas), será necesario contar con un cliente web, es decir, un navegador. 
En nuestro caso utilizaremos el más popular: Internet Explorer. Esta aplicación 
está incluida en Windows XP y podremos acceder a ella yendo a Inicio/Todos los 
programas/Internet Explorer. 

En el caso que en nuestra instalación de Windows no hayamos incluido este pro- 
grama, para instalarlo simplemente debemos ir a Inicio/Panel de control/Agregar 
o quitar programas. Allí seleccionamos la opción Agregar o quitar componentes de 
Windows y marcamos la casilla que identifica a Internet Explorer. Insertamos el 
CD de Windows XP y seguimos todos los pasos del proceso de instalación. 
Para obtener más información acerca de Internet Explorer, podemos ingresar en 
el sitio www.microsoft.com/spain/windows/ie/default.mspx, donde encontra- 
remos además, sus características principales, artículos sobre su utilización y no- 
vedades sobre las nuevas versiones del navegador, entre otras cosas. 


o FTP ANÓNIMO 


Es posible también que el servidor o directorio FTP sea público y no requiera un usuario y con- 
traseña específicos. Estos servidores se denominan FTPs anónimos y cuando se nos pidan es- 
tos datos debemos establecer en ambos casos [usuario y contraseña) la palabra anonymous, 
tanto en el caso de los clientes FTP como en el acceso vía navegador. 
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O Barra de estado: muestra información sobre el navegador, el sitio y los pro- 
cesos entre ambos. 

O Área de visualización: aquí se muestra el contenido de la página web. 

O Botón Atrás: permite volver a la página anterior. 

O Botón Adelante: si navegamos hacia atrás, permite acceder a la página siguiente. 

O Botón Detener: detiene la carga de la página web solicitada. 

O Botón Actualizar: recarga la página actual. 

O Botón Inicio: se dirige a la página inicial establecida en Internet Explorer. 

O Barra de título: muestra el título de la página web. 

O Barra de menús: a través de los diversos menús permite acceder a todas las 
funciones que ofrece Internet Explorer. 

© Favoritos: muestra una barra lateral con todos los marcadores. 

O Historial: despliega una barra lateral con todos los sitios visitados últimamente. 

(1 Barra de direcciones: nos permite escribir las direcciones web para luego ac- 
ceder a ellas mediante el botón Ir o la tecla ENTER. 

(B Botones de control de la ventana: permiten cerrar minimizar, maximizar y res- 
taurar la ventana del navegador. 
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TRANSFERENCIA DE ARCHIVOS: FTP 


Además del servicio web y el protocolo HTTP, otra de las herramientas que usa- 
remos durante los ejercicios y explicaciones de este libro es el FTP (File Transfer 
Protocol). Es fundamental aclarar que no pertenece al ámbito de la Web sino por 
el contrario, se trata de un protocolo de comunicaciones diferente del HTTP, 
que resulta mucho más eficiente y seguro en la transferencia de grandes canti- 
dades de datos. El servicio de FTP será de vital importancia a la hora de subir 
contenidos a nuestro servidor web. 

Al igual que el protocolo HTTP, el FTP también necesita de un servidor y de un 
cliente. El servidor podrá instalarse paralelamente al servidor web, al igual que 
el cliente puede ser instalado en simultáneo con el navegador. 

Así como el HTTP utiliza el puerto 80, en FTP usa el puerto 21 de forma pre- 
determinada, aunque estos valores pueden ser modificados en el momento en 
que configuramos nuestro servidor. 
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> 


3pg to mpeg  Alcohol.120,.. antivirus atomsync AYI TO YCD 
W YU > Y y 


Cd 05 CD Master CD Masterz. CDMaster3  CDMasteré commander... 
ii MAC... 


Contapluss control remoto cosas de data smiguel discos rigidos hackz 
fuche testeo 


H ā E WE ọọ E 
herramientas Legato linux lotus Mail server M mcafee spam 


para gusanos Mekworker_... daemon killer 


Usuario: soft a Internet 





Figura 9. Los sitios FTP se muestran con la misma 
estructura de carpetas que un directorio local. 


En algunos navegadores web también se nos da la posibilidad de acceder a sitios 
FTP, lo que hará mucho más eficaces y rápidas nuestras tareas de subida y baja- 
da de archivos. Esto lo lograremos aclarándole al browser que en lugar de una di- 
rección de Internet, se trata de un sitio FTP al que deseamos acceder, por lo que 
en lugar del prefijo http://, tendremos que colocar ftp://. El FTP cuenta tam- 


bién con un sistema de seguridad de usuario y contraseña. 
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Transferencia de archivos: FTP 


En el caso de un cliente específico de FTP, la configuración de estos parámetros 
será fácil, pero en el caso de que queramos acceder a un sitio FTP por medio de 
nuestro navegador, tendremos que incorporar estos dos elementos dentro de la 
dirección FTP que ingresamos, por lo que ésta quedaría de la siguiente manera: 
ftp://usuario:contraseñaC servidor. 

Supongamos que nuestro servidor FTP fuera, por ejemplo, una empresa comer- 
cial española denominada FixServer, por lo que la dirección del servidor FTP de 
la misma es fixserver.com.es, y nuestro usuario y contraseña fueran usuariol y 
usrl respectivamente. Lo que deberíamos escribir en la barra de direcciones de 
nuestro navegador sería ftp://usuario1l:usrl Cfixserver.com.es. 


a RESUMEN 


Durante la lectura del capítulo transcurrido pudimos aprender y comprender todos los con- 
ceptos básicos que hay que tener en cuenta para comenzar con la planificación y el desarrollo 
de un sitio web profesional. En el próximo capítulo seguiremos incorporando conocimientos, 
pero más especificamente acerca de los criterios y objetivos que hay que decidir antes de co- 
menzar con la creación práctica del sitio. 


USERS 97 


TEST DE AUTOEVALUACIÓN 


1 ¿Qué diferencia existe entre Internet y la 
World Wide Web? 


N 


Explique las propiedades del protocolo y el 


lenguaje predeterminados de la Web. 


3 ¿Qué es un dominio? 


4 Explique la función de un browser. Dé dos 


ejemplos. 


¿Para qué sirve el sistema de DNS? 


6 Explique FTP, 


7 Explique el método de transacción de datos 


entre un cliente y un servidor web. 


8 ¿Qué son las cookies? 


9 Nombre y explique la función de tres de los 


elementos que componen a Internet Explorer. 


10 ¿Cuáles son las maneras de acceder a un 
sitio FTP? 
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Y ACTIVIDADES 


ACTIVIDADES PRÁCTICAS 


Y Averigue en Internet acerca de otras redes 


posteriores a ésta, como la ARPANet. 


Y Busque información acerca de los otros 
navegadores disponibles. Si le es posible 
descargue alguno, instálelo en su PC y 


compárelo con Internet Explorer. 


Y Investigue sobre los restantes protocolos 
de Internet [además de HTTP y FTP). 


Y Averigue alguna dirección FTP y trate de 


acceder a ella mediante su explorador. 


Y Infórmese acerca de diferentes clientes 
FTP. Descargue alguno, instálelo y acceda 


a la dirección del punto 4 mediante él. 


CREACIÓN DE SITIOS WEB 





Planificación 
producción 
del sitio 


Durante este capítulo analizaremos cada 











etapa del proceso de creatividad previo a 
la construcción de un sitio. Esto debe 
realizarse para obtener un resultado de 
calidad y evitar malentendidos con 
nuestros clientes o companeros de 


equipo. lambién empezaremos a 


Definición del sitio 


desglosar la estructura básica de una Objetivos del sitio 
Definir contenidos 
pagina web y sus posibles componentes La dirección artística 


El lenguaje web: HTML 
¿Qué son los tags? 
Tags básicos 
Formateo de textos 
Inserción de imágenes 
Los enlaces 

Resumen 


SERVICIO DE ATENCIÓN AL LECTOR: lectoresGmpediciones.com Actividades 


mediante la escritura del código fuente. 
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CREACIÓN DE SITIOS WEB 


DEFINICIÓN DEL SITIO 


Es hora de comenzar a evaluar los criterios y contenidos que incluiremos en el ar- 
mado de nuestro sitio web. Este proceso previo al armado de las páginas es de vital 
importancia para proceder con un trabajo claro y organizado, como también para 
despejar dudas acerca de los potenciales clientes y consumidores sí el sitio web es 
para una empresa u organización. Asimismo, sí se tratara de un sitio personal, mu- 
chos de los conceptos que veremos nos serán de gran utilidad para ordenar nuestros 
procedimientos y crear normas para el desarrollo puntual del sitio. 


Objetivos del sitio 

Antes de comenzar con un proyecto web, tenemos que tener en claro muchos 
factores que se encierran en un solo concepto: la definición de los objetivos del 
sitio y la forma de cumplirlos. 

Lo mejor será establecer la meta central con la que debe cumplir el sitio respecto de 
los usuarios, y de allí en más, incorporar nuevos objetivos complementarios o secun- 
darios. Es muy importante tener estos fines en claro y registrarlos, es decir, escribirlos. 
Una manera sencilla de descubrir adecuadamente los objetivos de un sitio es de- 
finir las características, visiones y necesidades particulares de la empresa o del 
usuario propietario y/o administrador. 

Una vez hecho esto, debemos tener en cuenta que el principal objetivo de cualquier 
sitio es tener relevancia dentro de Internet. Como no es lógico ni recomendable ins- 
talar sitios web sin ningún propósito, será importante tener cierta Importancia y pre- 
sencia dentro de la Web con respecto a nuestros actuales o futuros competidores o 
sitios similares. Esto podremos lograrlo incluyendo siempre información actualizada, 
una buena organización e interactividad con el usuario. Otro factor fundamental pa- 
ra establecer los objetivos del sitio será definir el target, es decir, la audiencia a la que 
se dirige su contenido. Este proceso no será sencillo, pero al lograr todos estos pun- 
tos, ya estaremos listos para centrarnos en el contenido de nuestras páginas. 


Definir contenidos 

Una vez que tengamos establecidos los objetivos y destinatarios del sitio, así co- 

mo las necesidades del propietario, no nos será muy difícil definir los conteni- 

dos y la estructura de las páginas que compondrán nuestro sitio. 

Para esto, lo más frecuente es desarrollar un mapa de contenidos, definiendo pri- 

mero factores fundamentales. Lo más lógico será realizar una serie de preguntas 

(que surjan de la etapa de objetivos y target) a personas que conozcan bien al pro- 
E e e I s I : E, 2 e ifi I J? “e, 2 

pietario o patrocinador del sitio, tales como: “¿Qué significa el nombre?”, “¿Qué 

área le gustaría encontrar en el sitio?”, “¿Qué tipo de contenido querría ver en ca- 


5 =3 Y $ 
> 
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Definición del sitio 


da área?”. Con las respuestas obtenidas podremos realizar las modificaciones ne- 
cesarias, comprobando aciertos y errores en las decisiones y planes establecidos. 
Dentro de los contenidos básicos de sitios de empresas e instituciones podemos 
encontrar secciones como mapa del sitio, formularios de contacto, información 
personal o institucional, novedades, buscador interno, áreas para usuarios regis- 
trados, servicios y productos, ayuda, historia, etc. 

Para definir el tipo de contenido que incorporaremos a nuestro sitio web, será 
también muy importante realizar un análisis exhaustivo y profundo sobre sitios 
de similares características, es decir, destinados a una audiencia semejante y 
con objetivos similares. La comparación e incorporación de nuevas ideas será 
fundamental. Finalmente, estaremos listos para pensar en estructurar nuestras 
ideas, es decir, darle forma y diseño a todo lo planteado. 

Será de vital importancia realizar un esquema en papel o de forma digital (dia- 
grama o diseño en programas de ilustración) de la estructura de cada página y 
sección de nuestro sitio. Luego se puede empezar a definir el aspecto visual (co- 
lores, imagen corporativa, estilo de fuente, títulos, encabezados, botones, menús, 
orientación de los textos y de las imágenes, logotipo, elementos multimedia, 
etc.). Será también conveniente aclarar todas las interacciones y sus resultados 
en forma de notas y también gráficamente (como los formularios, los registros 
de usuarios, los links, las descargas, etc.). 

Una vez que tenemos desarrollados estos bocetos, contamos con las herramien- 
tas necesarias para poder iniciar la etapa de creación práctica del sitio, proceso 
que comenzaremos a ver a partir del siguiente capítulo. 


Sitio web 
¿Qué es? Indice Genera Preguntas Descargas 
frecuentes 


Figura 1. Diseño de un boceto digital de un mapa para un sitio web estándar. 
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La dirección artística 

Para mejorar el diseño y todos los aspectos visuales de un sitio, una gran idea es 
comenzar por la dirección artística. Para eso, primero conoceremos los conceptos 
básicos de un director de arte, aprendiendo la manera en que los criterios de una 
correcta dirección artística pueden crear y dar forma a una experiencia e interac- 
ción muy atractiva y funcional para el usuario. 

En nuestra futura función de diseñador y desarrollador de sitios web, los elementos 
y componentes esenciales, pero individuales, formarán parte de un todo, es decir, 
de una página con un criterio determinado. Pero antes que nada, cumpliendo con 
los procedimientos de director de arte, tenemos como objetivo unificar todas estas 
partes para lograr los máximos resultados y los mejores efectos y percepciones del 
usuario. En definitiva, los conceptos que explicamos aquí no pretenden más que en- 
señar la técnica que utiliza un director de arte para relacionarla con el diseño web 
y analizar de qué manera puede influir esto en el efecto global de un sitio. 

El factor más importante de la dirección artística es el concepto. Y por cierto, el 
talento es fundamental en el momento de desarrollar ideas, que serán las que 
movilizarán las estructuras de un sitio y le darán vida. Las ideas son parte inte- 
erante de un proceso creativo, y será nuestro primer objetivo descubrir cuál es y 
de qué manera se desarrolla el nuestro. 

Otro punto importante es la motivación y la estimulación de esas ideas. Para co- 
menzar, debemos decir que cualquier idea, hasta la más alocada, puede tener un 
eran efecto sobre la experiencia del usuario, por lo que será importantísimo ex- 
poner la totalidad de las ideas surgidas, tanto desde el entorno creativo como por 
parte del cliente. Un plan muy efectivo para la exposición y selección de ideas 
creativas es organizarlas en una hoja de papel. Normalmente se toma una hoja y 
se coloca el objetivo del sitio, y luego se formulan 20 ideas principales como po- 
sibles futuras soluciones. Para ello deberemos tener en cuenta algunos ítems de 
relevancia. Lo primero será no censurarse, ya que cualquier idea es bienvenida en 
este proceso. También será fundamental escribir las ideas de forma rápida y re- 
sumida pero sin olvidar sus puntos clave. También es útil utilizar recursos gráfi- 
cos como ejemplo para entender mejor las ideas, pero sin ponerse a diseñar. Lue- 
go de estos pasos básicos, podemos pasar a la selección de ideas creativas, donde 


o ESTRUCTURA Y DISEÑO 


A la hora de comenzar a armar los diagramas de cada área, sección o página del sitio, será impor- 
tante tener en claro qué significan dos conceptos. Estructura se refiere a la forma que tendrá el si- 
tio en sus secciones, funciones y sistemas de navegación. En cambio, el diseño implica las solucio- 
nes gráficas que se implementarán en el sitio, como los colores, las formas, viñetas, etc. 
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debemos analizar y elegir las dos o tres ideas que más nos convencen y concuer- 
dan con el objetivo propuesto, para trabajarlas poco a poco. Esto ya nos permi- 
tirá pensar en el diseño, los colores, las tipografías, etc. 

Luego llegará el momento de presentar la idea seleccionada, que deberá ser apro- 
bada por el propietario del sitio. A partir de entonces, se comienza con la etapa 
de producción, en la que será necesario mantener un contacto directo con el 
cliente y con todo el equipo que esté trabajando con nosotros en el proyecto 
(creativos, diseñadores, programadores, etc.). 


EL LENGUAJE WEB: HTML 


El HTML no es un lenguaje que resulte demasiado complicado; un usuario prin- 
cipiante puede comprender, y hasta programar, páginas web mediante este códi- 
go sin ningún tipo de inconvenientes. 

Bastará con contar con un editor simple de texto para desarrollar el código, como 
puede ser Word de la suite Office, WordPad o el simple Bloc de notas de Windows. 
Tomemos como ejemplo esta última aplicación, que será la que resultará más sen- 
cilla de manejar para todo tipo de nivel de usuario. 

Lo básico y necesario a la hora de crear una página web escribiendo manualmen- 
te su codificación será abrir la aplicación con un nuevo documento de texto, de- 
sarrollar el contenido del código y almacenar este archivo en nuestro disco du- 
ro, reemplazando el formato de texto (TXT en el bloc de notas), por un forma- 
to de hipertexto, como HTML o HTM. Una vez que hayamos guardado nues- 
tra página con esta extensión, simplemente bastará con ejecutar el archivo en 
nuestro navegador para observar los resultados. 

Vamos a analizar una página HTML básica según su código. Tengamos en cuen- 
ta que por ahora sólo veremos los componentes fundamentales del código (tex- 
to, imágenes y enlaces). Los componentes y comandos complementarios, así co- 
mo algunos más avanzados, los analizaremos en capítulos posteriores, cuando 
veamos el manejo de software específico para este tipo de tareas. 


ii LA FASE DE PRODUCCIÓN 


Un truco para la fase de producción de la etapa de dirección artística es conocer cómo aprovechar 
las tecnologías disponibles, es decir, saber qué se puede hacer y qué no. Para mejorar nuestro ser- 
vicio, conviene asociarse con diferentes especialistas o conocedores de cada tema en particular y no 
trabajar solo, ya que la suma de ideas y conocimientos puede mejorar mucho el rendimiento. 
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¿Que son los tags? 

Primero debemos establecer que el código HTML se maneja mediante diversos 
tags (también denominados etiquetas), es decir, instrucciones que corresponden 
a determinado elemento que se va a mostrar o ejecutar dentro de la página. Los 
tags tienen un nombre específico para cada acción y elemento de la página, y se 
encierran entre los signos < y >. 

Cada vez que queremos dar una instrucción, ésta comenzará con un tag y finaliza- 
rá con su tag correlativo. El tag que finaliza una instrucción llevará el símbolo / den- 
tro. Tomemos el ejemplo de un párrafo, donde el tag que le corresponde es P. Así 
es que, para iniciar un párrafo de texto tendremos que colocar el tag <P>, luego es- 
cribiremos el texto que deseamos que contenga ese párrafo, y una vez que está fina- 
lizado, cerramos la instrucción con el tag de cierre correspondiente, es decir </P>. 
También para cada tag existen diferentes modificadores que se encierran dentro de 
esos signos < y > del tag de inicio y que van luego del nombre del tag. Por ejemplo, 
un modificador del tag <P> es el comando ALIGN=alineación, donde alineación pue- 
de ser LEFT (izquierda), RIGHT (derecha), CENTER (centrado) o JUSTIFY (justificado 
o completo). Este modificador nos permite indicar la alineación que tendrán los ca- 
racteres del párrafo. Por ejemplo, si queremos centrar el texto del párrafo, su sinta- 
xis quedaría de la siguiente forma: <P ALIGN=CENTER> texto del párrafo </P>. 


Tags básicos 

Con respecto a la clasificación básica de los tags, observemos lo siguiente: primero, 
para que el código sea interpretado correctamente por el navegador, debemos indi- 
carle a éste en el código que el documento que está mostrando es una página web 
con código HTML, por lo que siempre comenzaremos el desarrollo de una página 
con el tag <HTML> y la finalizaremos con su tag de cierre correspondiente, o sea, 
</HTML> (este cierre va luego de todo el contenido de código de la página). 
Dentro de todo este código, podemos definir dos áreas claras que determinan los 
sectores más importantes de la página: el encabezado y el cuerpo. La primera sec- 
ción se iniciará con el tag <HEAD> y concluirá con </HEAD>, y comprenderá elemen- 
tos como el título de la página (que se mostrará en la barra de títulos de navegador) 
y los scripts y comandos correspondientes a los que se haga referencia en cualquier 
parte del cuerpo de la página. El título de la página se establecerá con los tags <TI- 
TLE> y </TITLE>, obviamente dentro de los tags <HEAD> y </HEAD>. 

Por otro lado, luego de finalizar con el tag <HEAD>, nos encontramos con el cuer- 
po de la página, que se comprenderá entre el tag de inicio <BODY> y el de cierre 
</BODY>. Es entre estas dos etiquetas donde desarrollaremos todo el contenido de 
la página insertando texto, dándole formato, incrustando imágenes, tablas, ele- 
mentos multimedia, links y todos los componentes que deseamos que se mues- 
tren en el navegador, como también la configuración de sus propiedades. 


El lenguaje web: HTML 


Veamos, entonces, un ejemplo básico de una página web estándar, con los tags que 
hemos visto hasta el momento, con los comentarios aclaratorios correspondientes. 


<HTML> <!- se inicia el código HTML -> 

<HEAD> <!- se inicia la cabecera de la página -> 

<TITLE> Página de prueba </TITLE> <! - se establece el título de la página -> 
<| HEAD> <!- se cierra la cabecera de la página -> 

<BODY> <!- se inicia el cuerpo de la página -> 


<P ALIGN=CENTER> Esta es 


con su texto centrado 


</BODY> <!-= se cierra el 
<| HTML> <!-= se cierra el 


una página de prueba </P> <!- se incorpora un párrafo 


> 


cuerpo de la página -> 


código HTML -> 


Veamos ahora, paso a paso, cómo crear un nuevo documento HTML. 


E Crear un documento HTML 


OO 





a] Abra un nuevo documento en el Bloc de notas de Windows (Inicio/Todos los pro- 
gramas/Accesorios/Bloc de notas). 


z 


EE 


Paula 


I [Es Abrir documento de Office 


Internet 
Internet Explorer 


D Correo electrónico 
Ig Microsoft Office Outlook 


Todos los programas 


(y Configurar acceso y programas predeterminados 
Ef Nuevo documento de Office 

> Windows Catalog 

Y Windows Update 


Accesorios 
I) Inicio 
(T) Juegos 
I] Microsoft Office 
p Asistencia remota 
2 Internet Explorer 
ad Microsoft Firewall Client Management 
MÍ msn 
$) Outlook Express 
($) Reproductor de Windows Media 
8, Windows Messenger 
AÀ windows Movie Maker 





B Cerrar sesión o] | eaten EAn iaa] 


PANAT 





(1) Accesibilidad 

(m) Comunicaciones 

(E) Entretenimiento 

(M) Herramientas del sistema 

©) Asistente para compatibilidad de programas 
A ES 

£ Calculadora 

(3 Explorador de Windows 

aJ Libreta de direcciones 

Y Paint 


5) Paseo por Windows XP 


Simbolo del sistema 


(SY Sincronizar 


A} WordPad 


[2] Escriba el código fuente anterior dentro del archivo. Cuando finalice, vaya a Ar- 


chivo/Guardar como.... 


» 
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» 


SNE 


a Edición Formato Yer Ayuda 


Nuevo Cri el código HTML -=-> 
Abrir... Ctra la cabecera de la página --> i 
a ba </TITLE> <! - se establece el título de la 
Guardar CtrG =| la cabecera de la página --> 
Guardar como... x el cuerpo de la página --> 


es una página de prueba <P> <!-- se incorpor 
Configurar página... el cuerpo de la página --> 
Imprimir... Ctrl+P el código HTML --> 


Salir 





Al guardar seleccione la opción Todos los archivos y escriba el nombre que quie- 
re darle seguido de la extensión HTML (HTML o HTM). Por ejemplo, Prueba.htm. 


e E E 


Guardar en: 


h {mis documentos 
4 À W Mi PC 


Documentos ul Mis sitios de red 
recientes 


Escritorio 


Mis documentos 


Hombre: Prueba. htm ka 
Mis sitios de red Tipo: Todoz loz archivos e 


Codificación: | ANSI 





Ahora que tenemos el documento creado, bastará con hacerle doble clic para ver 
el resultado en nuestro navegador. 


o COMENTARIOS 


Como todo lenguaje de programación, HTML también ofrece la posibilidad de agregar comenta- 
rios al código fuente. Éstos no serán mostrados por el navegador y nos servirá a nosotros, desa- 
rrolladores, para tener más en claro la función o las secciones de la página. Los comentarios se 
agregan dentro del tag <!— comentario —>. 
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ENE A 


Archivo Edición Wer Favoritos Herramientas Ayuda 


y > E E D 7 ) Búsqueda SL Favoritos 2) 


Dirección 142] C:iDocuments and Settings|Paula|EscritoriolPrueba.htm 


Esta es una página de prueba 





Figura 2. Aquí se muestra en el navegador el resultado 
del código escrito en el ejemplo anterior. 


Formateo de textos 

El principal elemento de una página web es, sin dudas, el texto. A continuación 
enumeramos las etiquetas que más se utilizan para darle formato. 

<P> y </P> son los tags donde se encerrará el texto comprendido en cada párra- 
fo. El modificador más común es ALIGN= (CENTER, LEFT, RIGHT o JUSTIFY), que 
establece la alineación del texto del párrafo. 

<Hx> y </Hx> son los comandos de inicio y de cierre para un tag que permite es- 
tablecer el formato del texto según cabeceras preestablecidas por algunas normas 
del HTML. Es decir, son categorías de títulos que podemos utilizar fácilmente pa- 
ra dar jerarquías diferentes, como título, subtítulo, etc. La x del tag debe reempla- 
zarse por valores del 1 al 6, y esto significará un aumento de tamaño en la tipogra- 
fía. Por ejemplo, si escribimos <H1>Texto de testeo</H1>, la frase “Texto de testeo” 
se mostrará en el navegador del tamaño más grande. En cambio, si escribimos 
<H6>Texto de testeo</H6>, la frase se mostrará de un tamaño mucho más chico. 
El tag <FONT> (con su correspondiente cierre </FONT>) nos permitirá personalizar el 
formato del texto que se encuentre entre ellos. Sus modificadores más usados son 
FACE=nombre de tipografía (establece la fuente que se usa), COLOR=black (indica el 
color de la fuente, en este caso, negro) y SIZE=tamaño (aplica un tamaño al texto). 
Veamos un ejemplo. Supongamos que deseamos que el texto encerrado en este tag 


nm MODIFICAR EL CUERPO 


El tag <BODY> posee modificadores que cambiarán la visualización general del cuerpo de la página, 
como BGCOLOR=red (aplica un color de fondo a la página] v« BACKGROUND="imagen” (establece una 
imagen de fondo para la página). También podremos agregarle modificadores de texto como a un pá- 
rrafo u oración: <BODY BGCOLOR=red TEXT="+FFFFFF”> (letras blancas sobre el fondo rojo). 
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tenga como fuente predeterminada la tipografía Arial, un tamaño de 5 píxeles y co- 
lor rojo. En nuestro documento HTML deberemos escribir lo siguiente: 
<FONT FACE=Arial SIZE=5px COLOR=red>Texto</FONT> 


Dentro de un párrafo normal debemos escribir: 


<HTML> 

<HEAD> 

<TITLE>Página personal</TITLE> 

</ HEAD> 

<BODY> 

<P> Deseo que <FONT FACE=Arial SIZE=5px COLOR=red>esta frase</FONT> 
quede resaltada 

<| P> 

<| BODY> 

<| HTML > 


El navegador mostraría lo que se ve en la Figura 3. 


E] AAA AAA 


Archivo Edición Yer Favoritos Herramientas Ayuda 


y y E E B| ) Búsqueda 9,£ Favoritos CA) Multimedia Es) 
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Deseo que esta frase quede resaltada 





Figura 3. Con el tag <FONT> podremoss modificar los estilos 
de los textos para resaltar, titular o adecuar al diseño que elegimos. 


oi TAGS MODIFICADORES DE TEXTO 


Existen muchos tags que modifican el texto que encierran, por ejemplo, <B> ... </B> (negrita), <I> 
.. </I> [cursiva), <S> ... </S> (tachado), <U> ... </U> [subrayado], <SUP> ... </SUP> [superíndice), 
<SUB> ... </SUB> (subíndice), <CENTER> ... </CENTER> (centrado), <BR> [cambia de línea, como un 


ENTER en un procesador de textos) o <HR> (inserta una línea horizontal). 


El lenguaje web: HTML 


Codificación de colores 

El código HTML posee una norma específica para establecer los colores que pode- 
mos aplicarle a los elementos (normalmente a fondos y textos). En las explicaciones 
anteriores hemos visto que cada vez que se debía especificar un color, se lo denomi- 
naba con su nombre en inglés. Estos son alias de la norma de codificación de colo- 
res HTML, y son muy pocos los casos en que podremos detallar el color de esta ma- 
nera. Algunos ejemplos son: rojo (red), negro (black), amarillo (yellow), azul (blue), 
verde (green), celeste (light blue), rosa (pink), verde oscuro (dark green), gris (gray) 
o naranja (orange), sólo por nombrar algunos ejemplos. 

Sin embargo, la forma más apropiada de denominar a los colores en el código 
HTML es a través de un código numérico de 6 cifras precedido por el signo #, ya 
que de este modo podremos utilizar una gama más amplia de colores. Este códi- 
go numérico es un número en sistema hexadecimal. 

La paleta de colores web es bastante amplia y se denomina RGB (Red, Green y Blue), 
y para cada color se asigna uno de estos códigos. Es así que, por ejemplo, el color ne- 
gro podrá ser especificado, además de con su nombre en inglés, con el código #000000, 
o el blanco con el #FFFFFF. De esta manera, por ejemplo, si deseamos aplicar un color 
lila claro a un texto tendríamos que escribir en el código <FONT COLOR= #CC99FF>Este 
texto es color lila</FONT>, y el resultado sería el observado en la Figura 4. 

Más adelante, cuando analicemos conceptos como el procesamiento de imágenes, la 
creación de páginas mediante software o el manejo de hojas de estilo, aprendemos más 
acerca de la codificación de colores y conoceremos todas las tonalidades existentes. 
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Figura 4. Mediante la codificación de colores podremos 
incluir muchas más tonalidades a nuestras páginas web. 


Caracteres especiales 

En el lenguaje HTML contamos con varios caracteres que no se insertan de forma 
directa desde el teclado, sino a través de un código alfanumérico que representa al 
denominado carácter. La mayoría de las veces ese código comienza con el símbolo 3 
y finaliza con ;. Por otro lado, así como no podemos insertar cierto tipo de caracte- 
res de manera directa, tampoco podemos insertar más de un espacio seguido en- 
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tre caracteres simplemente presionando la barra espaciadora de nuestro teclado. Pa- 
ra esto existe el comando gmbsp;. Veamos entonces, en la siguiente tabla, los princi- 
pales caracteres especiales incluidos en la última versión del código HTML. 


CÓDIGO RESULTADO 


&aacute;, &Aacute;, &eacute;, &Eacute;, &iacute;, 


&lacute;, &oacute;, &Oacute;, &uacute;, &Uacute; á Á é É í Í ó, Ó ú Ú 
&ntilde; y &Ntilde; ñ y Ñ 

&iquest; ¿ 

&iexcl; j 

&ordm; i 

&ordf; E 

&trade; o &#153; ™ 

&copy; © 

&reg; © 

&nbsp; espacio 


Tabla 1. Principales caracteres especiales 
codificados que pueden incluirse en un documento HTML. 


Inserción de imágenes 

El segundo componente de una página web para que ésta sea dinámica, explícita grá- 
ficamente y a la vez atractiva, será la inclusión de imágenes dentro de su cuerpo. 

La manera de realizar este procedimiento no es compleja, y se logra mediante el uso 
de un solo tag: <IMG>, al que será muy importante agregarle sus modificadores. El mo- 
dificador principal es SRC=origen, donde en origen debemos especificar la ruta com- 
pleta que indique dónde está ubicado el archivo. Esta ruta puede ser local si el archi- 
vo está ubicado en la carpeta del sitio o en alguna de sus subcarpetas, o también pue- 
de ser remota si se hace referencia a una dirección de Internet para este dato digital. 
Examinemos un ejemplo. Supongamos que deseamos incluir en el cuerpo prin- 
cipal de nuestra página una imagen con formato JPG llamada img1.jpg y ubica- 
da en una subcarpeta del sitio denominada imágenes. El código que habría que 


oi HOJAS DE ESTILO 


Una hoja de estilo es un archivo con extensión CSS donde podemos definir estilos visuales y así evi- 
tar especificar el estilo de cada elemento cada vez que se lo inserta. Se declara su uso en el enca- 
bezado de la página con el tag <LINK REL=stylesheet> y su modificador SRC=origen. Si la hoja de es- 
tilo se llama estilos.css, el código sería <LINK REL="stylesheet” SRC="estilos.css” TYPE="text/css”>. 
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incluir en el documento HTML sería <IMG SRC=imágenes/img1.jpg>. El resulta- 
do sería el que se muestra en la siguiente figura. 


À Documento sin titulo - Microsoft Internet Explorer 
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Figura 5. El navegador plasma en pantalla la imagen insertada. 


El segundo modificador relevante es el de texto alternativo, que se indica con el co- 
mando ALT="Texto”. Este texto puede servir como nota o dato complementario a la 
imagen, y será el que se mostrará cuando el usuario pase el mouse sobre la imagen. 
Por ejemplo, para la imagen anterior, podríamos escribir lo siguiente: <IMG SRC=imá- 
genes/img1.jpg ALT="Juan Román Riquelme anota un gol para la selección Argentina.”>. 
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Juan Román Riquelme anota un gol para la selección 
Argentina. 








Figura 6. Además de mostrar un recuadro cuando se pasa el mouse sobre 
la imagen, el navegador mostrará el texto alternativo si no puede mostrar la imagen. 
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Por último, nos queda por conocer los modificadores de alineación y tamaño 
de una imagen en HT'ML. En el primer caso, como en la mayoría de los elemen- 
tos, el comando utilizado será ALIGN=alineación, y los posibles valores pueden ser 
centrado (CENTER), alineación a la izquierda del texto (LEFT), alineación a la de- 
recha del texto (RIGHT), con el texto en la línea más alta (TOP), con el texto en la 
línea más baja (BOTTOM) o con el texto en la línea media (MIDDLE). En cuanto al 
tamaño, contamos con dos modificadores que se aplicarán también a otros ele- 
mentos, como tablas, celdas o capas. Estos son WIDTH=ancho y HEIGHT=alto. Am- 
bos valores los debemos especificar en píxeles, por lo que si deseamos modificar 
el valor original de nuestra imagen a uno de 400x180 píxeles, tendríamos que 
definir el siguiente código <IMG SRC=imágenes/img1.jpg ALT="Juan Román Ri- 
quelme anota un gol para la selección Argentina.” WIDHT=400 HEIGHT=180>. 
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Figura 7. El navegador muestra la imagen con el tamaño modificado. 
Hay que tener cuidado con no deformar la imagen por darle valores desproporcionados. 


Los enlaces 

Finalmente, antes de comenzar a planificar la estructura y los contenidos de nuestro 
sitio, será de vital importancia conocer la forma de incluir links o enlaces en nues- 
tras páginas, ya que éstos son el elemento que posibilita la navegación en el sitio. 
Los links son fáciles de incluir en nuestros documentos HTML, mediante la eti- 
queta <A> y su cierre </A>. Un factor fundamental en este tag es su modificador 
HREF=vínculo, que será el comando que indique la página, imagen o elemento al 
que se refiera el link. Todo lo que las etiquetas <A> y </A> comprendan entre sí 
conformará el hipervínculo, que puede ser texto o imágenes. 
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Veamos en primer lugar cómo crear un link que incluya solamente texto. Suponga- 
mos que deseamos incluir en nuestro sitio un enlace a la página www.google.com.ar. 
El texto que tendremos que definir será <A HREF=http://www.google.com.ar>Ir a 
Google</A>. El navegador mostrará la frase Ir a Google con un link a ese sitio. 


E Ad 
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Figura 8. Aquí se muestra un link simple de texto. Al pasarle por arriba 
con el mouse, en la barra de estado del navegador se muestra su destino. 


Distinto es el caso si deseamos incluir un vínculo en una imagen. El código que inclu- 
yamos primero debe abrir el tag de hipervínculo. Dentro deberemos insertar el tag de 
imagen con referencia al archivo de imagen que deseamos que represente al link. Final- 
mente, cerraremos el tag de enlace con </A>. Quedaría algo como <A HREF=http:// 
www.google.com.ar> <IMG SRC=logo.jpg BORDER=0> </A>. El resultado será el siguiente: 
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Figura 9. Aquí se muestra un link de imagen. En la barra 
de estado del navegador también se muestra el destino del link. 


Ea RESUMEN 


Tener claros los conceptos sobre la preproducción y la selección de ideas para armar un sitio web 
no será una tarea sencilla, ya que nuestros sentidos de percepción y de estilo, la creatividad y la 
organización, jugarán papeles fundamentales. A pesar de que resulte difícil, esta tarea será fun- 
damental, al igual que la incorporación de las nociones básicas sobre el lenguaje de diseño HTML. 
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Y ACTIVIDADES 


TEST DE AUTOEVALUACIÓN 


1 


N 


¿Qué es lo primero que hay que definir antes 


de comenzar con la creación de un sitio? 


Explique para qué sirve un mapa de sitio y 


la mejor manera de armar su estructura. 


3 Además de los objetivos, ¿qué otro factor 


es fundamental para comenzar a definir 


contenidos? 


¿De qué dos maneras podrán hacerse los 


bocetos de las páginas? 


¿Qué función básica cumple un director ar- 


tistico? 


¿En qué consiste la fase de producción? 


¿Cuál es el mejor método para seleccionar 
una idea para la dirección artística de un si- 


tio web? 


Enumere tres etiquetas básicas para el for- 
mateo de texto en HTML, sus propiedades y 


sus modificadores. 


¿Cuál es el tag para insertar imágenes en 
un documento de hipertexto? Explique sus 


modificadores. 


10;¿Cuál es el tag para insertar links? Expli- 
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que sus modificadores. 


EJERCICIOS PRÁCTICOS 


Y Defina un sitio que quiera crear y establez- 


ca por escrito su objetivo final. 


Y Defina los contenidos y clasifiquelos en 


secciones. 


Y Realice un boceto en papel del mapa del 


sitio. 


Y Elija el logotipo y la combinación de colo- 


res que identificarán a su sitio. 


Y Cree la primera página del sitio mediante 
lenguaje HTML, incluyendo un título, una 
Imagen, un texto informativo y un enlace a 


algún sitio de interés. 


CREACIÓN DE SITIOS WEB 


Imagen 

pl E Z 
y animación 
En el presente capítulo aprenderemos 
acerca del tratamiento y la composición 
de imágenes para nuestras påginas web. 
También analizaremos y comenzaremos 
a utilizar los programas y las 
herramientas necesarias para realizar 
los componentes multimedia 


esenciales, como, por ejemplo, 


introducciones y menús interactivos. e e 
Las imágenes digitales 


El diseño y la Web 
Gráficos vectoriales 
Los mapas de bits 
Los formatos 
Los colores en la Web 
La tipografía 

Macromedia Fireworks 
La pantalla principal 
Filtros y comandos 
HTML y Fireworks 

Resumen 


SERVICIO DE ATENCIÓN AL LECTOR: lectoresGmpediciones.com Actividades 





46 
46 
47 
48 
49 
93 
54 
36 
99 
62 
65 
11 
12 


CREACIÓN DE SITIOS WEB 


LAS IMÁGENES DIGITALES 


Dentro del mundo de Internet, un elemento vital para el aspecto de un sitio es incluir 
en ellos imágenes en diferentes formatos. Además, una imagen podrá cumplir diferen- 
tes funciones dentro de una página web, y que éstas sean cumplidas como queremos 
dependerá sólo de nosotros y de la aplicación de algunos de los factores que vimos en 
el capítulo anterior, como la clara definición de objetivos y los puntos sobresalientes 
de la dirección artística (colores, formato, tipografía, estética, logo, etc.). 

La correcta selección y edición de las imágenes digitales que vamos a incluir en 
nuestro sitio será fundamental para que éste posea un contenido visual acorde con 
el mensaje que se desea transmitir y que, a la vez, sea atractivo para el usuario final. 
En las páginas siguientes resolveremos algunos conceptos básicos, como el sentido 
esencial del diseño gráfico, su relación, diferencias y semejanzas con el diseño web. 
También analizaremos los principales elementos que caracterizan a las imágenes (re- 
solución, coloración, etc.) y las diferentes clasificaciones y formatos que existen. 
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Figura 1. A través de programas de diseño web como Fireworks, podemos 


$ obpiss 





optimizar nuestras imágenes y hasta crear sitios web por completo. 


EL DISEÑO Y LA WEB 


El diseño puede definirse como la tarea o el arte de seleccionar, crear, ordenar 
y combinar diferentes elementos dentro de un mismo espacio para lograr un ob- 
jeto visual único que exprese una idea o concepto. Para que sea eficiente, el di- 
seño debe comunicar un mensaje claro y de manera directa, a un target determi- 
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nado, siempre a través de cierto canal, que puede ser el papel (folletos, volantes, 
tarjetas, etc.) o un medio digital, como en nuestro caso, la Web. Para lograr esto, 
el diseñador deberá conocer con profundidad todos los recursos con los que cuen- 
ta o puede contar, y también ejercitar el desarrollo de nociones como el sentido 
común, el buen gusto y la imaginación. Estas prácticas serán las más complica- 
das, ya que no son procesos prácticos ni mecánicos, sino conceptuales. La teoría 
y práctica que ofrecemos en este capítulo podrán ayudar al lector a tener mayor 
dominio de estas dimensiones del diseño. 

Los recursos que ofrece el diseño son muchos, especialmente en el ámbito web. 
Algunos serán producidos por algún elemento en particular (como las fotogra- 
fías, que se obtienen mediante la cámara digital o el escáner) y otros (la mayo- 
ría) los tendremos que crear nosotros mismos, como las ilustraciones o los ico- 
nos. La mayoría de ellos podrán ser modificados y personalizados con procesos 
como los que brindan programas como el que analizaremos y utilizaremos en es- 
te libro (Macromedia Fireworks). 

Todos estos recursos, más otros adicionales, podrán ser combinados para obtener 
esos elementos finales que cumplan un determinado objetivo dentro del sitio. 


Gráficos vectoriales 

Se denomina gráfico vectorial a toda imagen digital que esté definida por trazos 
computarizados, es decir, mediante elementos gráficos (líneas, puntos, figuras geo- 
métricas, etc.) creados a través de fórmulas matemáticas. Claros ejemplos son las 
ilustraciones o las tipografías, que se crean a partir de este tipo de método. 

Existen muchos programas de diseño gráfico e ilustración que permiten desarrollar 
esta clase de imágenes, como el CorelDRAW, Macromedia Freehand o Macrome- 
día Flash, cuyas funcionalidades analizaremos más adelante. 

Un gráfico vectorial (a diferencia de su formato contrastante, el mapa de bits), puede 
ser escalado, rotado y deformado sin que esto dañe su definición y calidad. Esto se de- 
be a que al realizar cualquiera de esos procedimientos, la computadora realizará nue- 
vamente la operación matemática que define a los objetos y los representará nueva- 
mente. Además de esta ventaja, un gráfico vectorial suele ser mucho más liviano que 


nm PROGRAMAS DE DISEÑO 


Existe una gran cantidad de programas para el manejo de los diferentes tipos de imágenes. Entre 
ellos encontramos a Adobe Photoshop, Corel PhotoPaint, PaintShop Pro y Macromedia Fireworks, 
dedicados a la edición y el retoque fotográfico. También encontramos programas como CorelDRAW, 
Macromedia Flash o Adobe Illustrator, inclinados hacia la imagen vectorial y la ilustración. 
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un mapa de bits, y en algunos casos también podremos realizar animaciones con ellos, 
como con Macromedia Flash. Una desventaja de las imágenes vectoriales es que no 
pueden reproducir fotografías fielmente o desarrollar imágenes complejas. 





US 


Figura 2. En los gráficos vectoriales podremos crear elementos a partir 
de líneas rectas, como polígonos, y también mediante curvas (mano alzada). 


Los mapas de bits 

Los mapas de bits, o gráficos rasterizados, son imágenes que están definidas por 
medio de milimétricos puntos (píxeles), cada uno de ellos con un valor de co- 
lor y luminosidad determinada, que se ubican dentro de una cuadrícula que 
representa a la totalidad de la imagen. La proximidad de uno con otro refleja en 
la pantalla la sensación de una imagen homogénea. Mediante este método es que 
las imágenes fotográficas pueden digitalizarse (a través de escáneres, cámaras u 
otro medio digital) y mostrarse en la computadora. 

A diferencia de lo que sucede con un gráfico vectorial, al escalar o deformar un 
mapa de bits, éste perderá definición y calidad (siempre dependiendo de los va- 
lores que se modifiquen), debido a que al aumentar el valor de un píxel, éste ten- 
drá que modificar también su tamaño y, por ende, en la pantalla se verá más 
grande y no será realista el efecto que produce en la continuación de uno con 
otro. Por eso es que los mapas de bits dependen mucho de la resolución que po- 
sea la imagen, y también de la cantidad de colores que tenga su paleta. 


mm VECTOR VS. PÍXEL 


Un gráfico vectorial puede estar definido por una serie de elementos gráficos que determinarán su 
estructura y composición, como puntos, líneas rectas, curvas o polígonos. Para crearlos, debemos 
establecer su posición, su color, su forma, su relleno, su contorno, etc. En cambio, en un mapa de 


bits estos elementos estarán definidos por una cierta cantidad de píxeles que se organizan por tono. 





48 


El diseño y la Web 





Figura 3. Imagen mapa de bits. Aquí notamos que al escalar 


un sector, los pixeles se notan más, perdiendo así su calidad original. 


Los formatos 


Existe una gran variedad de formatos o extensiones que podemos manejar para incluir 
en nuestras páginas web, y la mayoría posee la característica de pertenecer al grupo de 
los mapas de bits, desde el popular JPG hasta formatos mucho más comprimidos y 
avanzados como el PNG. A continuación enumeramos y explicamos los principales. 

BMP (Bitmap): es el formato más sencillo en cuanto a la conformación de sus es- 
tructuras y no realiza ningún tipo de compresión en sus datos, por lo que normal- 
mente suele tener un gran tamaño, aunque no puede negarse que su calidad es bue- 
na y su velocidad de carga también. Los formatos BMP admiten cualquier tipo de 
resolución y profundidades, desde los 8 hasta los 24 bits. Su estructura es simple, in- 
cluyendo una cabecera que incorpora los datos básicos de la imagen, como paleta, 
resolución, tamaño o número de colores; luego posee la información de la imagen 
en sí, distribuida de izquierda a derecha y píxel a píxel. Una desventaja es que no es 
multiplataforma, ya que sólo es compatible con PC y MAC OS. Por eso, si los in- 
corporamos en un sitio, solamente Internet Explorer podrá mostrarlos en pantalla. 


MM ADOBE PHOTOSHOP 


Adobe Photoshop es uno de los programas que podemos seleccionar para editar los gráficos pa- 
ra nuestra web. Aunque este programa está mucho más dedicado a desarrollos como la edición 
o el retoque fotográfico, también podemos utilizarlo para crear imágenes para nuestros sitios. 
La desventaja radica en que posee escasa compatibilidad con el lenguaje HTML. 
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JPEG o JPG (Joint Photographic Experts Group): es el formato estándar por 
excelencia de las páginas web. Es soportado por la gran mayoría de los navega- 
dores web, puede trabajar a escala de grises, RGB y CMYK. Su mayor caracte- 
rística es la compresión que provee, por lo que se puede almacenar muchas imá- 
genes digitales de alta calidad con pesos de archivo relativamente bajos. La com- 
presión de estos archivos se basa en la eliminación de la información que poseen 
las imágenes y que el ojo humano no es capaz de distinguir, por ejemplo, en la 
mayoría de las imágenes de 24 bits. La pérdida de calidad es casi nula, excepto 
que esta compresión se exagere. Cuando esto ocurre, los daños más notorios se 
verán en los contrastes, ya que se producen en ellos algunas zonas borrosas, en- 
tre otras cosas. No permite transparencias mediante canales alfa o la posibilidad 
de animación mediante fotogramas. 

GIF (Graphics Interchange Format): se trata también de un formato basado en 
mapa de bits, y sus características principales son la incorporación de transparencias 
y la animación. Una desventaja es que sólo soporta hasta 256 colores en 8 bits, por 
lo que su calidad de imagen no es demasiado buena. Pese a esto, este formato es 
muy utilizado en Internet debido a las dos posibilidades que ofrece. También pre- 
senta una importante rutina de compresión. 

PNG (Portable Network Graphics): se trata de un formato de mapa de bits sim- 
ple y de alta compresión. Es una buena alternativa para los formatos GIF y JPG. 
Soporta la transparencia y, aunque se puede guardar un PNG con información so- 
bre fotogramas animados, el navegador no lo reproduce como una animación. Las 
transparencias en PNG son de mucha mejor calidad, ya que a diferencia de los GIF 
soporta una paleta de colores mucho mayor (hasta 48 bits). También permite la vi- 
sualización de las imágenes de manera entrelazada, es decir, progresiva. 

SVG (Scalable Vector Graphics): este formato vectorial es el primero de ellos en 
proponer la compatibilidad con HTML, almacenando el sistema de vectores me- 
diante un sistema de etiquetas propio. Esto resulta muy beneficioso ya que debido 
a ello, puede ser modificado mediante cualquier editor de texto simple (al igual que 
el HTML o el XML). Maneja 24 bits de profundidad de color y los sistemas de pa- 
leta estándar como el RGB, CMYK, etc. Admite también una gran cantidad de 
efectos, como transparencias, suavizados y tipografía editable. 


nm EL FORMATO TIFF 


Esta extensión (TIF) es también muy común, pero se utiliza mucho más en los ámbitos de diseño 
gráfico [especialmente para materiales que se imprimen], ya que su calidad de imagen es una de 
las mejores [mejor aún que los BMP). TIFF quiere decir Tagged Image File Format, y es también un 
formato de mapa de bits. Su principal desventaja es el gran tamaño que poseen sus archivos. 
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SWF (Shockwave Flash): es el formato de salida de gráficos y animaciones vecto- 
riales que utiliza uno de los programas más populares para diseño web: Macrome- 
dia Flash. Estos archivos son el resultado de los archivos fuente (FLA) de esta apli- 
cación y son compatibles con la mayor parte de los navegadores que se utilizan en 
la actualidad, siempre mediante el uso del plugin correspondiente. 
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Figura 4. En este sitio web se utilizan diferentes tipos de formatos 
de gráficos digitales, por ejemplo, el encabezado y el menú 
están realizados en Flash. En cambio, los logos de abajo son JPG. 


La resolución 

Podría decirse que la resolución es el tamaño relativo de un componente visual digi- 
tal. Tomemos como ejemplo la totalidad del monitor: su tamaño absoluto sería el es- 
pacio real que ocupa físicamente su pantalla, y se mide en pulgadas, por ejemplo, 14 
pulgadas o 17 pulgadas. En contraste, el tamaño relativo o resolución del monitor o 
pantalla es la cantidad de píxeles que éste soporta, por ejemplo, 800 píxeles horizon- 
tales por 600 verticales (800x600) o 1024 píxeles horizontales por 768 píxeles vertica- 
les (1024x768). Estos son ejemplos de resoluciones de pantalla. Para las imágenes y to- 
do documento visual que se reproduzca en una computadora, la resolución se define 
de igual modo: la cantidad de píxeles horizontales por la cantidad de píxeles verticales. 
La resolución es relevante sobre todo en los documentos de mapa de bits, ya que 
son los que se determinan mediante píxeles. En el contexto de las imágenes di- 
gitales, la resolución puede englobar varios conceptos, como la resolución de 
archivo digital, la resolución de impresión, resolución de digitalización, re- 
solución de semitono, etc., pero el primero de estos conceptos es el más ligado 
a lo que normalmente se denomina resolución, y está definido por el número de 
píxeles diferentes con los que cuenta una imagen por unidad de longitud. 
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Estos valores se miden con la medida de píxeles por pulgada (PPP o PPI en in- 
glés, Dots Per Inch). Cuanto mayor sea esta resolución, mayor será la cantidad de 
datos que ésta contenga, y así se incrementan todos los demás factores (con sus 
ventajas y desventajas, como la calidad y el peso del archivo de imagen). 

Otro tipo de resolución es la resolución de muestreo, que es la que se utiliza para de- 
terminar las imágenes digitalizadas, es decir, escaneadas. Ésta se define mediante el 
número de muestras de que se toman por cada pulgada, y se mide en SPI (Samples Per 
Inch). Cuantas más muestras por pulgada ofrezca la imagen, más cercana estará a la 
imagen original, es decir, mayor calidad tendrá. Esta medida ya no se utiliza mucho. 
También encontramos la resolución de impresión como una de las principales cla- 
sificaciones dentro de este concepto. Se trata de la capacidad que tiene la impreso- 
ra para la organización binaria de la imagen, es decir, los puntos de tinta o tóner 
por pulgada que se colocará en el papel para la impresión. Su medida son los DPI 
(Dots Per Inch), y a más puntos, mejor calidad de impresión. Finalmente, debemos 
nombrar a la resolución de semitono o trama, definida como la capacidad de im- 
presión de tramas en escalas de grises para representar tonos continuos. Se mide en 
LPI (Lines Per Inch) y es más utilizada en gráfica que en Web. 

Por supuesto que en nuestros proyectos web debemos usar lo que más nos convenga 
gráficamente, por lo tanto, lo más importante será evaluar la resolución del archivo di- 
gital, ya que definirá su calidad de visualización en la pantalla y su peso en disco. Re- 
cordemos que para los sitios web, los archivos que incluyamos no deben ser demasia- 
do pesados, para no volver la carga de la página lenta y fastidiosa. Por eso valoraremos 
mucho el trabajo con gráficos vectoriales y con mapas de bits no demasiado pesados. 





Figura 5. Una misma imagen en las resoluciones de archivo digital más frecuentes. 
En archivos PNG, el peso entre una resolución y la siguiente prácticamente se duplica. 
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Los colores en la Web 

A partir de aquí vamos a tratar de relacionar los conceptos teóricos y técnicos con 
algunos factores de personalización, es decir, pautas y elementos que den a nuestro 
sitio el estilo visual y las características que nosotros deseamos aplicarle. 

Dos componentes fundamentales para lograr estos objetivos serán los colores y la ti- 
pografía que conformen el sitio. Por ahora analizaremos el primer componente, es 
decir, los colores que darán personalidad y estilo a nuestras páginas. 

Los elementos prácticos que debemos tener en cuenta son, entre otras cosas, la 
correcta elección de la gama y tonalidades. Los teórico-técnicos implicarán la 
adecuada aplicación de la paleta de colores a cada imagen y el retoque de cada 
una de ellas para equilibrar su color (contraste, brillo, saturación, etc.). Estos úl- 
timos procesos los veremos más adelante, cuando analicemos Macromedia Fire- 
works y sus herramientas. 

Comencemos por entender las nociones básicas de color que determinarán las sen- 
saciones que causan las imágenes de nuestro sitio web. Esto también podrá aplicar- 
se a los demás elementos visuales de la página, como el texto. 

Será muy importante aplicar la gama de colores en todas las páginas del sitio para 
dar continuidad y relación a cada una de ellas y para establecer una identidad pro- 
pia al sitio en general. Si diseñamos un logotipo, conviene seguir sus tonalidades en 
el diseño de las páginas, variando en los degradados y tonalidades que se apliquen 
a cada elemento. Si es necesario adicionar una o más gamas de color, debemos te- 
ner en cuenta la sensación que queremos reflejar. 

Podemos decir que, básicamente, las tonalidades de colores se clasifican en dos 
ramas: los colores fríos y los colores cálidos. Entre los primeros encontramos 
tonos como los azules y celestes, verdes y violetas. Los colores cálidos agrupan 
tonalidades como los rojizos, anaranjados, amarillos y marrones. Todas las esca- 
las de grises actuarán como neutralizadoras de color, aunque los más oscuros son 
más cercanos a los cálidos y los más claros, a los fríos. 

También existen clasificaciones en las paletas de color que determinarán un es- 
tilo en particular, como las paletas tradicionales (colores básicos y complemen- 
tarios, por ejemplo, la combinación rojo-azul-verde), las paletas formales (colo- 
res oscuros, normalmente combinados con negros y grises), las paletas moder- 


oi LAS IMÁGENES 


Algunos de los roles que puede cumplir una imagen dentro de una página pueden ser el de repre- 
sentar un botón, un menú, una barra, un enlace, o simplemente acompañar un contenido de texto, 
complementándolo y ampliándolo si es necesario. Este último sentido es el que se aplica también 
en ediciones impresas, como este libro, donde cada imagen ejemplifica o explica algo. 
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nas (contrastes entre tonos complementarios en gama y/o color) o las paletas im- 
formales (colores llamativos y estridentes, sin mucho respeto por las gamas). 


Alfa: | 100% (* sa 





Figura 6. Aquí vemos la paleta de colores de un programa 
en particular y su conformación decimal y hexadecimal. 


Formato del color 

Las computadoras manejan tres colores básicos denominados primarios y, a par- 
tir de ellos, se elaboran todas las tonalidades restantes. Este sistema es el RGB, y 
es el más utilizado dentro del mundo digital. RGB son las siglas de Red-Green- 
Blue, es decir, rojo-verde-azul, y la composición de otros tonos se realiza median- 
te la combinación de los píxeles que representan a cada color básico. Esta es la 
paleta estándar usada para la Web. 

Otro concepto importante en cuanto al color de las imágenes es la profundidad de co- 
lor, que se determina mediante los bits que conforman la imagen. A mayor cantidad 
de bits por píxel, mayor cantidad de variantes de colores tendremos disponibles. 


La tipografía 

A la hora de realizar páginas web, la tipografía es otro de los factores fundamentales 
que hay que tener en cuenta para el diseño visual. Este elemento es el formato gráfi- 
co que tendrán las fuentes de nuestras páginas, es decir, la forma física de las letras. 


nm CODIFICACIÓN DE COLORES 


Hay dos maneras de definir la clasificación de los tonos: el formato decimal y el hexadecimal. En 
ambos, la codificación se representa según los porcentajes de cada color primario. Por ejemplo, el 
rojo puro (100% rojo, 0% verde y 0% azul] en formato decimal se expresa como 255,0,0 y en hexa- 
decimal, como #FF0000. Este último se utiliza en el diseño web y siempre se inicia con el signo #. 
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Será muy importante definir varios estilos iniciales de fuentes que enmarquen 
cada uno de los elementos textuales de nuestras páginas. Es decir, tendremos que 
establecer un formato para cada componente textual, como los textos de los bo- 
tones y menús, los títulos, los subtítulos, los cuerpos de texto, los formularios, 
los enlaces, los textos de las imágenes o los textos publicitarios (a veces puede ser 
el mismo formato para varios elementos). 

Para cada uno de ellos, tendremos que definir su tamaño, su color, si llevará sombra o 
no, su espaciado, su alineación respecto a la página 
y otras propiedades. En definitiva, vamos a tener 
que establecer un estilo visual para las tipografías de 
cada componente de texto individual de la página. 


Tipografia 
Fipografia 

Mucho tendrán que ver también en este sentido las 

elecciones realizadas anteriormente, como el objeti- TI POG RAF IA 
vo, los colores y la orientación que deseamos darle Ti pografia 
Tipografia 


a la página. Por ejemplo, si el sitio está dedicado a 
publicitar y ofrecer los servicios de una empresa, las 


fuentes tipográficas tendrán que tener un aspecto Tipografia 
formal o tradicional y, lógicamente, no desentonar » . 
a Tipografia 


con los colores y las formas de la página. 
Tipografia 


es tener en cuenta su legibilidad, aunque también hay Tipografia 
que considerar si es adecuada para el estilo y la Tipografía 
formalidad (o informalidad) del sitio. 


Figura 7. Al elegir una tipografía, lo más importante 





Aunque en una página web contamos con la posibilidad de imponer un estilo 
mediante cualquier fuente que tengamos instalada en nuestro sistema, debemos 
tener en cuenta que el lenguaje HTML reconoce sólo cinco formatos estándar 
de familias tipográficas, por lo que siempre nos va a convenir utilizar alguna de 
esas variantes para nuestros textos. Estas familias son la Arial, Courier, Verda- 
na, Times y Georgia. En el caso que deseemos incluir un tipo de fuente que es- 
té fuera de estos parámetros, tendremos que instalarla en nuestro servidor web e 


nm LOS GRAFISMOS 


El objetivo del diseño es crear un elemento particular que exprese algo. A este producto final se lo 
suele denominar grafismo (principalmente en los contextos impresos). Debemos tener en claro que 
como desarrolladores y diseñadores de nuestros propios sitios, mediante estos componentes gráfi- 
cos no solo tendremos que crear formas, sino también transmitir ideas, conceptos, sensaciones. 
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indicarle al navegador mediante código el origen de la fuente, cosa que veremos 
en detalle más adelante. Otra solución a esta limitación puede ser incluir deter- 
minados contenidos textuales mediante imágenes, en las que podremos escribir 
con cualquier fuente instalada en nuestra computadora. 


BIENVENIDOS AL SITIO! 


Este es mi stio Web personal, espero que disfruten de los 
contenidos que ofrece. 





Figura 8. Aquí se diseñó el encabezado de un título de un sitio 
mediante diferentes tipografías y colores. Está representado por una imagen. 


MACROMEDIA FIREWORKS 


En las páginas anteriores hemos empezado a conocer los elementos gráficos que 
puede contener una página web y hemos adquirido los conocimientos teóricos 
necesarios para incluirlos en nuestros sitios. A partir de ahora, comenzaremos a 
analizar el área práctica del manejo de contenidos visuales, es decir, manejo, 
creación, edición y optimización de imágenes para nuestras web. Como ya diji- 
mos, el programa que utilizaremos para este propósito es Macromedia Fire- 
works en su versión más reciente, la 8.0. 


Macromedia Fireworks es una completa aplicación de diseño gráfico y web que po- 
dremos utilizar para crear, editar y animar gráficos, incluir en ellos diferentes elemen- 
tos avanzados para la interactividad con el usuario y también optimizar fotografías y 
todo tipo de imágenes, aplicar efectos y diversos filtros para su óptima visualización. 
Una de las principales ventajas que nos proporciona Fireworks es la posibilidad de 
poder desarrollar tanto imágenes vectoriales como de mapa de bits en un mismo en- 
torno de trabajo, pudiendo así combinar las características de estos dos sistemas de 
imagen digital para aprovechar todo el potencial multimedia en nuestras páginas. 


oi SOFTWARE PARA CREAR FUENTES 


Podemos desarrollar nuestras fuentes, es decir, dibujar cada letra y sus variantes (mayúscula, ca- 
racteres espaciales, etc.). Existen programas que nos simplificarán la tarea: ScanFont (www.fon- 
tlab.com/Font-tools/ScanFont), FontLab Studio (www.fontlab.com/Font-tools/FontLab-Studio), 
TypeTool (www.fontlab.com/Font-tools/TypeTool) y FontCreator (www.high-logic.com/fcp.html). 
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Fireworks supone mucho ahorro de tiempo para actualizar contenidos de imagen 
en nuestros sitios porque nos evita la utilización combinada de varias herramientas 
de software (editor fotográfico, aplicación de filtros, exportación, conversión, etc.). 
Mediante Fireworks, por ejemplo, es posible exportar diversos componentes en forma- 
to HTML y JavaScript, lo que permite unir estos objetos interactivos de manera flui- 
da y perfectamente compatible con nuestras páginas web. En definitiva, Macromedia 
Fireworks es una completa herramienta para crear gráficos, utilidades y efectos para 
nuestras páginas, brindando las ventajas de la combinación y automatización de mu- 
chas de las tareas más frecuentes en este ámbito. Comencemos a aprender todo acerca 
de esta valiosa aplicación, analizando como primer paso el proceso de instalación. 


E instalar Fireworks 8 PASO A PASO 





a] Al insertar el CD de Macromedia Studio 8, seleccione la opción para instalar Fi- 
reworks. Comenzará la extracción del contenido del instalador y se presenta- 
rá el mensaje de bienvenida. Presione Siguiente para comenzar la instalación. 


aj Macromedia Fireworks 8 - InstallShield Wizard 
Extrayendo archivos 


Se está extrayendo el contenido de este paquete. 


Espere hasta que InstallShield Wizard haya extraido los archivos necesarios para 
instalar Macromedia Fireworks 8 en el equipo. Es posible que la operación dure unos 
minutos, 


Leyendo contenido de paquete... 


| | Cancelar | 





» 


mm ADQUIRIR FIREWORKS 


La versión final de Macromedia Fireworks pertenece a la suite Macromedia Studio 8 y es un progra- 
ma comercial. Podremos conseguir más información y algunas descargas de demostración en el si- 
tio oficial de la empresa [www.adobe.com/es/products/studio). Esta suite también incluye otras 
aplicaciones que utilizaremos a lo largo de este libro, como Flash Professional 8 y Dreamweaver 8. 
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» 


fl Debe aceptar los términos de licencia del producto y luego aceptar el resto de 
las opciones, por ejemplo, la carpeta de destino. 


JA Macromedia Fireworks E - InstallShield Wizard 


Contrato de licencia (AR Macromedia 


Lea cuidadosamente el acuerdo de licencia siguiente, 


CONTRATO DE LICENCIA PARA USUARIOS FINALES DE SOFTWARE 
MACROMEDIS,A 


IMPORTANTE: PUEDE QUE TENGA QUE DESPLAZARSE HASTA EL 
FINAL DE ESTE CONTRATO PARA PODER ALEPTSRLO Y CONTIMLIAR 
CON LA INSTALACION DEL SOFTWARE. 


IMPORTANTE: ESTE CONTRATO (o “EULA4% CONSTITUYE UN ACUERDO 
LEGAL ENTRE LA PERSONA, COMPANIA U ORGANLACIÓN QUE RATA 
CONCEDIDO LA LICENCIA DE ESTE SOFTWARE CUSTED” O EL 


"”RIAERITE" W MAiA COBAIA AlL IMITA AD WY ITI zA D EI CAPETA A OE 


Imprimir | 


w 


C Ne acepto los términos del contrato de licencia 


< Atrás Cancelar | 





Al terminar debe presionar Instalar para comenzar a copiar los archivos al equipo. 
El proceso se mostrará mediante una barra de progreso porcentual. Aguarde. 


1 Macromedia Fireworks 8 - InstallShield Wizard 


Preparado para instalar el programa AA macromedia 


El Asistente está preparado para comenzar la instalación. 


Haga clic en Instalar para comenzar la instalación. 


Si desea revisar la configuración de la instalación o realizar algún cambio, haga clic en 
átrás, Haga clic en Cancelar para salir del Asistente. 





= Atrás : ; Cancelar | 


a Al terminar, el proceso de instalación le brindará opciones para Ejecutar Macro- 
media Fireworks 8 y para Mostrar archivo Léame. Seleccione la que desea y pre- 
sione el botón Finalizar. 


58 USERS 


Macromedia Fireworks 


ig Macromedia Fireworks 8 - InstallShield Wizard 


Finalizado Macromedia Fireworks 8 - 
InstallShield Wizard 


InstallShield Wizard ha instalado Macromedia Fireworks 8 
correctamente. Haga clic en Finalizar para salir del asistente, 


[7 Ejecutar Macromedia Fireworks 8 


| Mostrar archivo Léame 





La pantalla principal 

Al ejecutar Fireworks 8 por primera vez, veremos un entorno de trabajo simple y atrac- 
tivo que consta de varios elementos. Para abrir el programa debemos ir a Inicio/Todos 
los programas/Macromedia/Macromedia Fireworks 8. A la izquierda de la pantalla ubica- 
mos la barra de herramientas principal, donde encontraremos todas las funciones para 
desarrollar y optimizar nuestros gráficos. En la parte superior vemos la barra estándar, 
donde están las opciones básicas para la administración de nuestros archivos de imagen 
(Guardar, Abrir, Imprimir, etc.). En el área inferior ubicamos el Panel de Propiedades, 
desde el que podremos modificar las características de cada elemento que seleccione- 
mos. En el margen derecho, encontramos diferentes paneles desplegables, como el Pa- 
nel de Capas (maneja el orden de los elementos), el Panel de Colores (selección de colo- 
res) o el Panel de Activos (estilos de rellenos y fuentes personalizables), entre otros. Al 
iniciarse, en el espacio de trabajo nos aparecerá una pantalla con las opciones más 
frecuentes de archivo, como abrir los últimos proyectos o crear uno nuevo. “También 
contamos con una barra de menús que contiene todas las funciones del programa. 


mm LOS PANELES 


En todas las aplicaciones de Macromedia, los paneles son ventanas que se acoplan al área de tra- 
bajo principal, en algún sector de la ventana. Para poder habilitar o deshabilitar alguno de ellos, ten- 
dremos que acceder al menú Ventana, donde figuran todos los que hay disponibles. Para ocultarlos 
todos, debemos marcar la opción Ocultar paneles del mismo menú o presionar la tecla F4. 
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O Barra de herramientas: incluye los botones que representan a todas las herra- 
mientas de la aplicación y sus variantes. 

O Barra estándar: agrupa botones como Abrir, Guardar, Importar, Exportar, Co- 
piar, Cortar, Pegar o Imprimir. 

O Barra de menús: contiene todas las funciones disponibles de Fireworks 8. 

O Espacio de trabajo: aquí se presentará nuestro lienzo para realizar, visualizar 
y editar las imágenes. 

O Paneles adicionales: aquí se agrupan una serie de paneles que brindan diferen- 
tes opciones para la edición de los gráficos y sus elementos. 

O Panel de Propiedades: presentará las opciones necesarias para editar y modifi- 
car las características de los objetos. 


La barra de herramientas 

Será muy importante conocer todas las herramientas que ofrece Macromedia Fi- 
reworks 8.0 para poder utilizarlo correctamente y para realizar una adecuada 
creación y modificación de los diferentes elementos que pueden componer nues- 
tros gráficos. Conozcámoslas entonces en su totalidad. 
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Herramientas de Fireworks GUÍA VISUAL 2 
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O Puntero: selecciona los objetos. 

O Escala: permite escalar, rotar y sesgar los 
objetos. 

O Selección: permite seleccionar una zona de 
la imagen con formas poligonales. 

O Varita mágica: permite realizar selecciones 
con máscaras por zona. 

O Lápiz: permite dibujar a mano alzada. 

O Desenfocar: aplica diferentes efectos de de- 
senfoque a los objetos. 

O Línea: permite dibujar líneas rectas. 

O Figura: permite dibujar figuras poligonales. 

O Estilo libre: convierte líneas rectas o secto- 
res de ellas en curvas. 

MW Zona interactiva: permite establecer zonas 
HTML (enlaces) a secciones del gráfico. 

® Ocultar zonas interactivas y divisiones: 
oculta las delimitaciones en pantalla de es- 
tos elementos. 

(Y Cuentagotas: absorbe un determinado color 
de un determinado objeto. 

® Color de contorno: selecciona el color de 
los bordes de los objetos. 

YB Color de relleno: selecciona el color del re- 
lleno de los objetos. 

©® Vistas: modifica el tipo de vista del área de 
trabajo. 

(BD Mano: permite navegar por el documento si 
éste excede los límites del espacio de trabajo. 

Y Subselección: modifica los contornos de 
los objetos. 

(B Recortar: recorta los objetos. 

O Lazo: permite seleccionar a mano alzada. 

€D Pincel: dibuja a mano alzada. 

€) Borrador: borra objetos o sectores de ellos. 

W Sello: copia un sector de la imagen hacia 
otro sector a mano alzada. 
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éB Pluma: permite realizar líneas y curvas a través de diferentes puntos. 

®© Texto: permite escribir textos. 

3 Cuchilla: divide en dos o más partes a los objetos. 

€ División: realiza divisiones en formato HTML. 

Y Mostrar zonas interactivas y divisiones: muestra las delimitaciones en panta- 
lla de estos elementos. 

® Cubo de pintura: aplica un color o relleno a un elemento determinado. 

® Opciones de color: brinda opciones como invertir los colores de relleno y con- 
torno, aplicar predeterminados o eliminar todo color. 

€) Zoom: permite aumentar y reducir la visualización del espacio de trabajo. 


Filtros y comandos 

Para optimizar nuestras imágenes, Fireworks nos ofrece diferentes opciones para 
aplicar diversos tipos de efectos a nuestros elementos. Dividiremos estos proce- 
sos según el tipo de imagen que estemos manejando. Contamos con varios efec- 
tos disponibles, sólo tenemos que recurrir a los menús Comandos y Filtros. Vea- 
mos un ejemplo de cómo aplicarlos. 





E Aplicar efectos PASO A PASO 


Ei Con la imagen abierta, diríjase al menú Comandos. Allí seleccione el comando 
que desee aplicar. 


2 Macromedia Fireworks 8 - [flor.png al 100% (Mapa de bits)*] 


Archivo Edición Yer Seleccionar Modificar Texto ME Filtros Ventana Ayuda 
b- E B 3 do a e B Administrar comandos guardados... 
EA ¿Administrar extensiones... 
emo o i | Ejecutar archivo de comandos... 

P Original E vista previa [1] 2 copia: Agrupar comandos por lotes 

| Asistente Gráficos y datos 
| Cambiar tamaño selección 
(E Añadir borde a imagen 
Documento Añadir puntas de flecha 
Restablecer diálogos aviso Añadir sombra 
Web Convertir a tonos sepia 
Convertir en grises 


Retorcer y fundir hs 


E 
Colores 
40 
P7 
eE 
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» 
Al Modifique las propiedades del comando como desee. Presione Aceptar para 
aplicarlo definitivamente en la imagen. 
dto hee e nl JONES ho se ld 


e 3e h A 


oi ARAN DE ge 


k 
E 
Pipa 
A 
hs 
a 
å 
Yir 
A 
a 
A 





Verá el resultado del efecto. Si no está conforme, puede volver atrás presionan- 
do CONTROL+Z y seleccionar un nuevo comando. También puede modificar el 
comando que agregó recientemente. 


A AA AR 
Archoro Edda Wer Seea Mobic Teto Tomar Pires Titam Spada 
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Eni riad w 


a Puede encontrar otros filtros en el sector derecho del panel de Propiedades. Pre- 
sione en el símbolo + para seleccionar uno. 


» 
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a Modifique las propiedades del filtro. Si la opción Vista Previa está seleccio- 
nada, verá la aplicación del filtro en el documento. Presione Aceptar para apli- 
carlo definitivamente. 


EAT 


DWERS oar yke 


PENADA” 
ACANDF Noi 
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DON 
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oR 
EN 





6 Guarde su imagen. Puede guardarla con el mismo nombre y ubicación (Archivo/ 
Guardar) o modificar estos parámetros para conservar la imagen original (Archivo/ 
Guardar como...). 
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HTML y Fireworks 


Ahora aprenderemos cómo aprovechar las funciones de División y de Zona Inte- 
ractiva que ofrece Macromedia Fireworks 8. La primera nos servirá para crear 
una plantilla visual para nuestro sitio, realizada completamente por imágenes. 
La herramienta División nos permitirá dividir nuestro archivo PNG en varios 
sectores e incluirlos en nuestro editor HTML de manera muy sencilla. Luego po- 
dremos eliminar las imágenes que no queremos que se incluyan, como los fon- 
dos lisos, que podrán ser reemplazados por un color de fondo para ahorrar tiem- 
po de carga de la página. Veamos cómo proceder. 


E Crear una plantilla de imagen PASO A PASO 





a Desarrolle el aspecto visual del sitio incluyendo todos los elementos gráficos 
que desee incorporar. 


AA AA | 
Paho Edición ve ae Hakke lemig Comando Era veta funda 
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EXPORTAR IMÁGENES 








Si quisiéramos exportar imágenes individuales, podemos hacerlo desde Archivo/Presenta- 
ción preliminar de la imagen.... En la ventana que se abre, elegimos el formato de archivo 
que queremos exportar y, luego de establecer parámetros como la calidad o la cantidad de 
colores, con sólo hacer clic en Exportar podremos guardar la imagen optimizada. 
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» 


E A los sectores de la página que luego incluirán otro tipo de datos, puede 
identificarlos con otro color y con un texto que indique qué elemento corres- 
ponde incorporar en ese lugar. 
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4 Una vez que terminó, exporte el documento (Archivo/Exportar...). Seleccione la 
opción Exportar archivo HTML. El resultado puede ser importado y modificado 
en su programa editor HTML (convenientemente, Dreamweaver 8). 


> 
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[5] Vea en su navegador el resultado final. Recuerde tener en cuenta que cuantas 
más imágenes posea un sitio, más lenta será su carga. 
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i DISPOSICIÓN DE LOS MENÚS 


El último paso del asistente para menús de Fireworks nos propone configurar la posición del menú 
desplegable. Esto lo haremos indicando al programa los valores correspondientes para los ejes X e 
Y respecto al documento. Otra forma de hacerlo es, al haber finalizado la creación del menú emer- 
gente, seleccionar el menú con la herramienta Puntero y arrastrarlo hasta donde queremos. 
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Más adelante adquiriremos los conocimientos necesarios para poder modificar el re- 
sultado que exportamos con Macromedia Fireworks. 


= 00000001 -jpg - Microsoft Internet Explorer 


Archivo Edición Yer Favoritos Herramientas Ayuda 


Q Atrás O |) E A P Búsqueda 57 Favoritos (A) multimedia ES) B- S z La ý CP) 


Dirección E] C:¡Documents and Settings|Deepcold| Configuración local Templ|FWTempl|00000001.htm 





Servicios » Diseño Web » Nosotros » Productos  » 
Prepagos 
Personales 


Planes a le 





Figura 9. En este caso mostramos un menú emergente 
horizontal con varios submenús creado por Fireworks. 


Para continuar, veamos de qué manera sirve una zona interactiva para crear for- 


matos HTML a partir de imágenes. Lo realizaremos con el ejemplo de los me- 
nús emergentes que ofrece Fireworks. 


E Menús emergentes AO AO 


EN Diseñe un botón inicial para su menú. 
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[a] Seleccione la herramienta Zona interactiva y defina el sector donde se deberá 
presionar el mouse para que el menú se despliegue. 


AAA AA Al 


Archie Edición Wer Bsecoona Madis Todo Comandos Për Ventana Masis 


Dénia .. DA 





Haga clic con el botón derecho sobre la zona interactiva delimitada y seleccio- 
ne la opción Añadir menú emergente.... 
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4 En el cuadro que aparece, configure el contenido y el aspecto del menú en los 
diferentes pasos. Debe presionar Siguiente para pasar al siguiente paso. 
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E El paso del aspecto será fundamental para establecer características del menú 
como los colores, el formato, el tipo de fuente y su tamaño. Podrá establecerse 
si se utilizarán imágenes o si será HTML. 
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6 Finalmente, exporte el documento (Archivo/Exportar...). Seleccione la opción 
Exportar Archivo HTML. Abra el archivo generado con el navegador para com- 
probar su funcionamiento y formato. 
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EN RESUMEN 


Con este capítulo cerramos todos los conceptos teóricos básicos y aprendimos los detalles de 
las imágenes digitales y de los gráficos para nuestra web. Comenzamos con el manejo de Ma- 
cromedia Fireworks, una herramienta muy útil y completa para el tratamiento de imágenes. 
Asimismo, pudimos ver cómo este programa se integra con HTML, brindándonos soluciones 
listas para ser editadas en Dreamweaver, el programa que veremos a partir del próximo ca- 
pítulo para armar nuestros sitios. 
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TEST DE AUTOEVALUACIÓN EJERCICIOS PRÁCTICOS 


=ð 


¿Qué es el diseño web? Y Investigue en Internet qué otras ramas del 


diseño estan relacionadas con Internet: 


N 


¿Qué dos ramas principales de imágenes 
digitales existen? Explique sus diferencias. vw Pruebe mediante la opción Archivo/Expor- 
tar... de Fireworks almacenar un archivo 
3 ¿Qué características posee un archivo BMP? de imagen en diferentes formatos y com- 
pare su peso. 
4 ¿Qué propiedades tiene el formato GIF? ¿Y 
el SVG? Y Pruebe convertir un gráfico vectorial en 


mapa de bits y redimensione cada uno de 


5 ¿Qué es la resolución de un documento de estos formatos. Establezca cuál de los dos 
imagen digital? pierde más definición. 

6 Explique los diferentes tipos de resolucio- Y Realice en Fireworks un menú emergente 
nes que existen. con base HTML y otro con base en imáge- 


nes y compare su velocidad y definición. 
7 ¿Qué dos clasificaciones primarias de colo- 
res es posible determinar? Y Cree una plantilla de imágenes aplicando 
filtros y comandos en las imágenes que 
8 ¿Qué es una paleta de color? Nombre dos agregue. 


ejemplos. 


9 Explique cómo aplicar un filtro en Fireworks. 


10 Explique cómo crear un menú desplegable 


en Fireworks. 
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Dreamweaver 
DÁSICO 


Por fin hemos llegado al tramo del libro 





donde aplicaremos nuestros 
conocimientos teóricos, es decir, 
empezaremos a diseñar nuestros 
sitios. Esto lo lograremos conociendo 
el editor HIML más utilizado en la 
actualidad: Macromedia Dreamweaver. 
Analizaremos todas sus características 
y sus funcionalidades para comenzar 


a utilizarlas de forma práctica. 


SERVICIO DE ATENCIÓN AL LECTOR: lectoresOmpediciones.com 


Macromedia Dreamweaver 8 
Obtener, instalar 
y ejecutar Dreamweaver 
La pantalla principal 
Las vistas 
La barra de herramientas 
de archivo 
La barra Insertar 
Tareas básicas 
Comenzar a trabajar 
Crear la estructura local 
del sitio 
Definición del sitio 
Servidor remoto 
Nuestro primer diseño 
Resumen 
Actividades 
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MACROMEDIA DREAMWEAVER 8 


Si bien ya sabemos manejar los elementos básicos que puede contener una página 
web, existen muchos otros componentes que podemos incluir en nuestras páginas. 
Muchos de ellos nos darán más variantes a la hora del diseño, la interacción y la fun- 
cionalidad de nuestros sitios (tablas, marcos, capas, imágenes de sustitución, anclas, 
formularios, elementos multimedia, aplicaciones, etc.). 

Además de resultar muy complejo, no tiene demasiado sentido memorizar la manera 
de incluir cada uno de ellos mediante el lenguaje HTML, cuando podemos contar 
con una aplicación que nos simplifique esta tarea. Es decir, para ahorrar en tiempo, 
complejidad y procesos, será fundamental contar con una herramienta de software 
que nos ayude a diseñar nuestras páginas web, sintetizando los procedimientos y sim- 
plificando las soluciones. También, gracias a este tipo de programas, no será necesario 
tener conocimientos profundos sobre lenguaje HTML, ya que mediante menús y di- 
versas herramientas, podremos aplicar formatos e insertar los elementos fácilmente. 
Existe una gran cantidad de aplicaciones para elaborar sitios de manera profesio- 
nal, como Microsoft FrontPage (www.microsoft.com/latam/office/frontpa- 
ge/) o WeBuilder 2006 (www.blumentals.net/webuilder/). Sin embargo, el 
más versátil y completo es el que se incluye dentro de la última versión de Ma- 
cromedia Studio: Dreamweaver 8. 


p 


macromedia? Figura 1. Dreamweaver es el más completo 
DREA IVV editor HTML del mercado. Pertenece a la 
completa suite de diseño Macromedia Studio. 





Este programa es muy amigable y sencillo, y nos permitirá crear sitios web atracti- 
vos, completos en interactividad y aplicaciones, y a la vez, sumamente profesiona- 
les. Además, esta aplicación puede utilizarse en combinación con las demás herra- 
mientas complementarias de diseño que incluye Studio 8 (Fireworks, Flash, etc.). 

Las opciones de edición visual de Dreamweaver 8 permitirán agregar diseño y fun- 
cionalidad a las páginas sin la necesidad de programar manualmente el código 
HTML de cada una de ellas. Los elementos que más se destacan entre ellas son la 


o CLIENTE FTP 


Otro de los factores más notorios en Dreamweaver es la integración a su entorno de trabajo de un 
completo cliente FTP, que nos permitirá subir los contenidos a nuestros servidores y publicar nues- 
tras páginas, permitiéndonos actualizarlos y sincronizarlos. Esto es de gran utilidad para contar con 


varias herramientas en una, ya que diseñaremos y publicaremos nuestras páginas en pocos pasos. 


Macromedia Dreamweaver 8 


creación de tablas, el manejo de capas y la inclusión de aplicaciones de diferente ori- 
gen (desde animaciones en Flash hasta complejas aplicaciones JavaScript y demás), 
como así también la compatibilidad con CSS (hojas de estilo). 


El entorno visual de Macromedia Dreamweaver 8 es sumamente sencillo y efi- 
ciente, ya que mediante diferentes barras de herramientas y paneles acoplables po- 
demos acceder a las diversas funciones del programa. En Dreamweaver también 
contamos con diversos paneles de objetos desde donde podremos arrastrar los ele- 
mentos hasta la hoja de trabajo, lo que simplifica mucho la interacción con el 
programa y la forma de trabajar. 


Obtener, instalar y ejecutar Dreamweaver 

Como todos los productos de Macromedia, Dreamweaver 8 es una aplicación co- 
mercial, al igual que, por ejemplo, Fireworks. Esto quiere decir que es un programa 
por el que hay que pagar un determinado costo. Igualmente, Macromedia nos da la 
posibilidad de descargar una versión de evaluación por 30 días que nos permite pro- 
bar el programa sin otra limitación que la temporal. Podemos encontrar la descarga y 
más datos sobre Dreamweaver en www.adobe.com/es/products/dreamweaver. 
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Drearraeaver Bes la herramienta de desarrollo Web ler del 
marcado y permite a sus usuarios diseñar, desarrollar y mantener 
de forma eficaz sflos y aplicaciones Web basados en normas. 
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Figura 2. Desde el sitio oficial de Dreamweaver podremos descargar 
una versión de prueba del producto y obtener toda su documentación. 


Bien, una vez que tengamos el CD de instalación o que hayamos descargado el 
producto, debemos ejecutar el instalador. Como en la mayoría de los programas, 
la instalación se basa en un asistente que nos guiará para instalar el software en 
nuestra computadora. El primer paso será el de configuración del instalador y su 
extracción, para luego dar paso a la primera pantalla de bienvenida. Para ir 
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avanzando debemos presionar el botón Siguiente en cada cuadro (también con- 
tamos con los botones Atrás, para volver al paso de configuración anterior, y Can- 
celar, para terminar el proceso inmediatamente). 


La Macromedia Dreamweaver 8 - InstallShield Wizard 


Bienvenido a Macromedia Dreamweaver 8 


InstallShield(R) Wizard instalará Macromedia Dreamweaver 8 
en su equipo. Para continuar, haga clic en Siguiente. 


ADYERTENCIA: Este programa está protegido por las leyes de 
derechos de autor y otros tratados internacionales. 


; Cancelar | 


Figura 3. La instalación de Dreamweaver 





no es para nada compleja y consta de unos pocos pasos. 


A continuación se nos mostrará el contrato de licencia y se nos preguntará si lo 
aceptamos o no. Debemos marcar la opción Acepto los términos del contrato de li- 
cencia y presionar Siguiente. Luego de la pantalla de bienvenida y del contrato de 
licencia, son muy pocas las cosas que hay que configurar para que el producto se 
instale adecuadamente, por ejemplo, si queremos crear accesos directos en el es- 
critorio o en la barra de inicio rápido, y las asociaciones de archivo. Hay que te- 
ner especial cuidado con la selección de formatos que editará Dreamweaver si uti- 
lizamos alguna otra aplicación que edite alguno de ellos. Finalmente se nos avisa- 
rá que está todo listo para que se pueda instalar la aplicación, por lo que presio- 
namos el botón Instalar para comenzar con la copia de archivos. El progreso se 
indicará mediante una barra. Por último (al igual que en la instalación de Fire- 
works), se nos mostrará la pantalla de finalización, donde se nos dará la opción 


o REGISTRO DE DREAMWEAVER 


Luego de la instalación y al ejecutar el programa, puede aparecernos una pantalla especial que nos 
servirá para registrar nuestro producto. Esto nos brindará soporte y asistencia adicionales (no pa- 
ra versiones de prueba). Podremos realizar este proceso electrónicamente o por correo tradicional 
y, además de soporte, podremos recibir novedades y actualizaciones de los productos. 
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de Ejecutar Macromedia Dreamweaver 8 y de visualizar el archivo Léame. Seleccio- 
namos la opción que deseamos y presionamos Finalizar. 


o ARA SIA Ar 


Editor predeterminado (AA, Macromedia 


Se establecerá Macromedia Dreamweaver 8 como editor predeterminado para los 
siguientes tipos de archivo: 


Y Active Server Pages (asp) V JavaScript (js) 

ÍV Java Server Pages (jsp) [Y Cascading Style Sheets (css) 

V ColdFusion cfm, cfc) Y Extensible Markup Language (xml) 
[Y ASP.NET (aspx, ascx) V XSL Style Sheets (xsl, xslt) 


Í4' PHP (php, php3, php4) 


Anular todas las selecciones | 
< Atrás | Siguiente > | Cancelar | 


Figura 4. Durante el proceso de instalación, tendremos que establecer 
qué formatos web se editarán con Dreamweaver de forma predeterminada. 





Para acceder al programa debemos ir a Inicio/Todos los Programas/Macromedia/Ma- 
cromedia Dreamweaver 8. Cuando se inicia, el programa mostrará su Splash 
Screen (pantalla de inicio) mientras se cargan todos los elementos necesarios, pa- 
ra luego darnos la primera opción que tenemos que configurar: el modo de tra- 
bajo. Se presentará un cuadro donde tenemos que seleccionar qué tipo de usua- 
rio somos, para que el entrono se adapte a la modalidad adecuada. Contamos con 
dos opciones: Diseñador o Programador. Como es natural, elegimos la primera. 
Luego de esa elección, se mostrará la ventana principal del programa. 


Configuración del espacio de trabajo 


Seleccione el diseño del espacio de trabaja que prefiera. Puede cambiar los diseños 
posteriormente seleccionando Yentana > Diseño del espacio de trabajo 
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Figura 5. Seleccionaremos la modalidad Diseñador, ya que se basa 
más en lo visual que en el código. Es la forma más sencilla de trabajar. 
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LA PANTALLA PRINCIPAL 


Al iniciarse Dreamweaver, la ventana primaria del programa se constituye de va- 
rios sectores y elementos. Contamos con la clásica barra de menús, la barra de 
herramientas superior, el sector de trabajo, el panel de Propiedades y los diferen- 
tes paneles complementarios. Debemos mencionar también que, al ejecutar por 
primera vez el programa, en el espacio de trabajo se presentará un panel con al- 
gunas opciones frecuentes, como abrir un archivo o crear uno nuevo. Para des- 
habilitar esta opción, debemos marcar la opción No volver a mostrar este mensa- 
je al pie de la ventana. Analicemos, entonces, área por área. 


Macromedia Dreamweaver GUÍA VISUAL 1 
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[Propiedades de la pág... ] 





O Inspector de propiedades: nos muestra y permite modificar las características 
del objeto seleccionado. 

O Barra de estado: nos informa acerca de las acciones que realizamos, los tags 
que estamos editando y las propiedades de la página. 

© Regla vertical: sirve como guía vertical para la distribución de los elementos. 

O Regla horizontal: sirve como guía horizontal para la distribución de los elementos. 
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O Vistas: permiten definir el método para ver y editar nuestras páginas (Diseño, 
Código y Dividir, mixto). 

O Página: estas pestañas separan los diferentes archivos que tenemos abiertos si- 
multáneamente para editar. 

O Barra Insertar: según la categoría que seleccionemos, nos ofrece las opciones 
de elementos más frecuentes. 

O Barra de menús: contempla todas las funciones de Dreamweaver. 

O Título: permite modificar el título de la página que se está editando. 

© Barra de herramientas de archivo: se ofrece una serie de opciones recurrentes. 

® Área de trabajo: este sector nos permitirá ver el diseño visual (vista Diseño) o el 
desarrollo de programación (vista Código) de la página editada. Será nuestro es- 
pacio de trabajo constante. 

®© Controles de archivo: permiten cerrar, minimizar o maximizar/restaurar la ven- 
tana interna que muestra el archivo que se está editando. 

1 Paneles adicionales: aquí se encuentran los accesos a los diferentes pane- 
les acoplables. 


Las vistas 


Como ya vimos, en Dreamweaver 8 podemos visualizar el contenido de nuestros do- 
cumentos de tres formas. La primera es la vista Diseño, que nos mostrará los elementos 
tal como se verán en la página, con la opción de poder modificar sus propiedades. Es 
muy útil para la edición visual y la inclusión rápida de elementos o aplicaciones. 
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Figura 6. Modo de visualización de una página mediante 
la vista Diseño. Es mucho más fácil armar páginas en este modo. 
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En segundo término tenemos la vista Código. Se trata de un entorno de codifica- 
ción manual del lenguaje HTML como en cualquier editor de texto. La diferen- 
cia con ellos radica en que Dreamweaver clasificará los tags por color, detectará 
errores de sintaxis y brindará acceso mucho más rápido a las etiquetas, además 
de la ayuda para la correcta escritura del código. 

Todo esto hace mucho más sencilla la programación. Además, no sólo compren- 
de el lenguaje HTML, sino que también podremos desarrollar en otros diferen- 
tes, como por ejemplo, JavaScript o PHP. 
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Figura 7. Modo de visualización de una página mediante la vista Código. 
Este modo es muy útil cuando estamos familiarizados con el lenguaje HTML. 


Por último, contamos con la opción Dividir vistas, que mostrará dos paneles hori- 
zontales. En uno veremos la vista Diseño y en el otro, el código fuente, y ambos se- 
rán editables simultáneamente. Esta última opción es muy útil, y si queremos, po- 
demos utilizarla para ir conociendo más el lenguaje HTML. 


oi BARRA DE CODIFICACIÓN 


Cuando ingresemos en la vista Código, podemos notar que se adiciona una barra al espacio de tra- 
bajo: la barra de herramientas de codificación. Esta barra contiene funciones de codificación bási- 
cas, como ampliar y contraer las selecciones de código, resaltar errores o secciones de código no 


válidos, insertar o eliminar comentarios o insertar tramos de código utilizados últimamente. 
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Figura 8. Modo de visualización de una página mediante 
la vista Dividir. Es muy útil para aprender HTML, ya que 
podemos agregar elementos y ver el código que les corresponde. 


La barra de herramientas de archivo 

Mediante esta barra podremos acceder a diversas opciones de visualización del 
documento y a la administración de éstos con respecto al servidor. Conzocamos 
la función de cada elemento que la compone. 


Macromedia Dreamweaver GUÍA VISUAL 2 


e Telele 


Titulo: | Documenta sin titulo pa po Lt a. pi El a . 








O Selector de vistas: mediante estos tres botones cambiamos de vista (Códi- 
go, Dividir y Diseño). 

O Título del documento: aquí podemos personalizar el título de nuestras páginas. 

© No hay errores de comprobación de navegador: permite comprobar la funcio- 
nalidad de la página en diferentes navegadores. 

O Validar formato: permite validar la página actual o alguna etiqueta. 
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O Administración de archivos: habilita un menú para la administración de archivos. 

O Vista previa/Depurar en el navegador: permite ver cómo se visualizará la pá- 
gina en el navegador. Debemos seleccionar uno del menú emergente. 

O Actualizar vista Diseño: recarga la página en el modo de edición para actualizar 
todos los cambios que pudieron producirse mediante aplicaciones externas. 

O Ver opciones: permite establecer las opciones de visualización de cada vista. 

O Ayudas visuales: nos da acceso a las diferentes opciones de ayuda visual. 


La barra Insertar 

Los sitios web contienen una gran cantidad de datos que se representan median- 
te objetos en su visualización. Las imágenes, los contenidos de texto planos, ele- 
mentos de formularios como botones, casillas de verificación o cajas de texto, hi- 
pervínculos, tablas, capas y marcos que separan la información, componentes 
multimedia como animaciones, secuencias de video, aplicaciones varias, etc. To- 
dos ellos se basan, por supuesto, en el lenguaje HTML, por lo que cada objeto 
representa un trozo de código, es decir, un tag o etiqueta que propone determi- 
nadas características. Pero como ya habíamos aclarado, la principal función de 
Dreamweaver es poder insertar toda esta clase de elementos sin la necesidad de 
conocer esta codificación del HTML, sino mediante una serie de funciones que 
programan automáticamente y están representadas por herramientas. 

En definitiva, todas estas herramientas (o por lo menos las más frecuentes) que 
representan objetos componentes, las podemos encontrar dentro de la barra 
Insertar. Esta barra muestra una serie de botones que ejercen diferentes funcio- 
nes, y está dividida en categorías, o sea, según el tipo de objeto que deseamos 
insertar. La categoría principal es la denominada Común, que incluye las herra- 
mientas utilizadas más comúnmente, como vínculos, imágenes y tablas. La cate- 
goría Diseño permite insertar capas, tablas y la etiqueta <DIV>. También permite 
personalizar la visualización de las tablas entre Estándar, Tablas expandidas y Di- 
seño. Luego encontramos la categoría Formularios, que contiene las opciones ne- 


o MÁS CATEGORÍAS 


Las categorías de código de servidor están sólo disponibles para la edición de páginas que utilicen 
un lenguaje de este tipo, como ASP o PHP, y contienen herramientas especificas y para insertar den- 
tro de la vista Código. La categoría Aplicación agrupa la inserción de diferentes elementos dinámi- 
cos. Además, según el lenguaje elegido, aparece una categoría con el nombre del lenguaje. 
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cesarias para la creación de estos elementos. Después, la categoría Texto permite 
insertar diversas etiquetas de formato de texto y listas. También contamos con la 
categoría HTML, que nos da la posibilidad de insertar y editar tags para la sección 
<HEAD>, reglas horizontales, tablas, marcos y scripts. También está la categoría 
Flash, que como su nombre lo indica, permite incorporar objetos creados en Ma- 
cromedia Flash, como animaciones, menús, etc. La última categoría es Favoritos, 
que permite personalizar la barra. 
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Figura 9. Podemos elegir categorías de la barra Insertar 
para incorporar diferentes tipos de objetos. 


El inspector de propiedades 

Para modificar las propiedades de los elementos de forma rápida y fácil, conta- 
mos con un panel ubicado en la parte inferior de la ventana del programa, de- 
nominado Inspector de propiedades. Mediante las diversas opciones que ofrece 
este panel, podremos editar una serie de características específicas de cada ele- 
mento seleccionado, siempre dependiendo del tipo de objeto que sea. 


mm FORMATOS COMPATIBLES 


Uno de los pasos durante la instalación de Dreamweaver será seleccionar la carpeta de destino del 
programa, es decir, aquella en la que se instalará dentro de nuestro disco duro. Lo más convenien- 
te es dejar la preestablecida. También se nos presentará una lista de formatos de archivo en la que 
marcaremos los que deseamos que se editen predefinidamente con Macromedia Dreamweaver. 
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Figura 10. Aquí vemos cómo el Inspector de propiedades nos da la 
posibilidad de modificar las características de una imagen seleccionada. 


Por ejemplo, si seleccionamos una imagen, el Inspector de propiedades mostrará 
una serie de opciones, como el tamaño, la ruta de origen o el contorno. En cam- 
bio, si seleccionamos un tramo de texto, nos brindará opciones para modificar 
el color, el formato, la fuente, el tamaño de ésta, etc. 
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Figura 11. En este caso, el Inspector de propiedades 
nos permite modificar el formato del texto. 


Tareas básicas 

Hemos repasado ya la teoría acerca de todos los componentes fundamentales del 
espacio de trabajo de Dreamweaver. A partir de ahora, comenzaremos a analizar 
la forma en la que se pueden realizar todas las tareas que nos permite llevar a 
cabo este potente editor de Macromedia. 

Para comenzar, primero veremos la forma en la que se realizan las acciones más 
básicas, como el manejo de archivos, y luego examinaremos las funciones pro- 
pias de la aplicación con respecto a la página web, como la inserción de los di- 
ferentes elementos y la conformación básica de una página. 
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Archivos nuevos, Abrir y Guardar 

Las tareas básicas de archivo se encuentran dentro del menú Archivo. Para crear un 
nuevo documento tendremos que ir a Archivo/Nuevo.... Al hacer esto, se nos pre- 
sentará un nuevo cuadro donde tendremos que seleccionar el tipo de archivo que 
vamos a crear. Entre todas las opciones, tendremos que seleccionar el formato HTML, 
que es el lenguaje que nosotros manejamos. Las restantes opciones son variantes en 
diferentes lenguajes, normalmente para el trabajo con lenguaje de servidores. 

En contraste, para abrir un archivo HTML ya existente, es decir, que ya se encuen- 
tra en nuestro disco duro, tendremos que recurrir al menú Archivo/Abrir..., y en el 
nuevo cuadro, examinar nuestro disco hasta encontrarlo y presionar el botón Abrir. 
Finalmente, para almacenar un archivo recientemente editado en nuestro disco, 
tendremos que ir a Archivo/Guardar (esta opción la usaremos para archivos nuevos 
o para guardar los cambios de un archivo ya existente). Si quisiéramos guardar el ar- 
chivo con otro nombre, tendríamos que utilizar Archivo/Guardar como.... 


NW Crear un documento HTML PASO A PASO 





A] Diríjase al menú Archivo/Nuevo.... 


A En el nuevo cuadro, seleccione el formato que desea crear. 
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Presione el botón Crear para proceder con la creación del nuevo documento. 


» 
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» 


El Se creará la nueva página. Puede comenzar a editarla. 
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Veremos que al acceder a la opción Nuevo del menú Archivo, contamos con va- 
rias opciones para crear nuevos documentos. En primer lugar tenemos la catego- 
ría Página básica, donde encontramos nuevos documentos de los formatos más 
comunes, como el que usamos nosotros, HTML y otros adicionales, como CSS, 
ActionScript o JavaScript. Luego, en la categoría páginas dinámicas, encontra- 
mos todas aquellas páginas base de aplicaciones dinámicas, como ASP o PHP. 
También contamos con la categoría Plantillas, que nos permite crear documen- 
tos preformateados sobre los mencionados anteriormente. 

La categoría Hojas de estilo CSS nos permitirá crear documentos con diferentes 
formatos HTML basados en lo visual, en cambio, la categoría Conjunto de marcos 
se refiere a las diferentes disposiciones de estos elementos (los marcos) en una pá- 
gina web. Luego, en la categoría Diseño de páginas (CSS) contamos con algunas 


mm VISTA PREVIA 


Mediante Dreamweaver 8 también será posible previsualizar una página diseñada sin la necesidad de 
almacenarla definitivamente. Esta opción la encontramos en el menú Archivo, y se denomina Vista 
previa en el navegador. Aquí podremos seleccionar los diferentes browsers que tengamos instalados 
en el sistema, lo que puede servir para comparar su visualización en diferentes entornos. 
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alternativas de diseño preformateado de páginas basadas en estilos visuales CSS. 
La categoría Páginas de inicio, en cambio, contiene una gran cantidad de bocetos 
para este tipo de página principal, con diferentes motivos y combinaciones. Por 
último, en la categoría Diseño de páginas encontramos diversos motivos de pági- 
nas predeterminadas pero sin estilo visual alguno aplicado. 


COMENZAR A TRABAJAR 


Diseñar páginas web no es una tarea sencilla, y eso lo tenemos que tener en claro an- 
tes de comenzar con el desarrollo de los próximos contenidos. Sin embargo, realizar to- 
dos los procesos que esta tarea implica será mucho más amigable y accesible mediante 
Macromedia Dreamweaver. A partir de ahora, comenzaremos a detallar la forma y las 
variantes para crear sitios web, con su estructura, su contenido y sus aplicaciones. 


Crear la estructura local del sitio 

Lo primero que debemos realizar antes de comenzar con el diseño es poner en prácti- 
ca la estructura de nuestro sitio, es decir, organizar jerárquicamente los archivos y 
las carpetas que los contendrán. Podemos armar cualquier estructura, pero debemos se- 
guir un orden o patrón que no olvidemos. Por ejemplo, lo más práctico es crear una 
carpeta general donde colocaremos todos nuestros sitios, convenientemente localizada 
en el disco raíz (C:). Es aconsejable poner a esta carpeta un nombre corto y preciso, co- 
mo Sitios. A partir de ese directorio, podremos crear una subcarpeta para cada sitio que 
diseñemos. Con respecto a la disposición de los archivos y subcarpetas que agrupe ca- 
da uno, conviene que cada sección del sitio se ubique en una carpeta individual, con 
todos los archivos correspondientes dentro. Dentro de cada sección, es común que en 
la clasificación de los archivos ubiquemos siempre una página principal de acceso, 
que será la que luego nos llevará a navegar por la ya mencionada sección. Este archivo 
suele nombrarse index, default o main (dependiendo del servidor web), seguido de su 


correspondiente extensión de formato (HTM, HTML, ASP, PHB etc.). 


i NOVEDADES 


Las características sobresalientes de la última versión de Dreamweaver son varias. Podemos des- 
tacar las mejoras en la compatibilidad con hojas de estilo mediante un panel de de alta performan- 
ce y sus mejoras en la sincronización del servidor y el directorio local, con una mejor gestión de 


cambios que nos permite bloquear o desbloquear contenidos para que ellos no se sobrescriban. 
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En la carpeta principal del sitio, también será conveniente organizar los contenidos. 
Es decir, que para cada tipo de elemento que apliquemos a nuestro diseño, tendre- 
mos que crear una carpeta determinada. Es así que contaremos con una carpeta pa- 
ra las imágenes, otra para las animaciones, otra para cada aplicación, otra para las 
hojas de estilo, etc. Esto se aplicará también individualmente a cada área del sitio. 
Con respecto a las páginas web propiamente dichas, convendrá crearlas directa- 
mente a través de Dreamweaver, ubicándolas en la carpeta del sitio que corres- 
ponda a medida que las desarrollamos. 
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Figura 12. Estructura primaria de un sitio en una ventana 
del explorador de Windows. Está basada 
en el mapa del sitio creado a comienzos de este libro. 


Definición del sitio 

En Dreamweaver, el término sitio se refiere tanto a los sitios web remotos como 
a las carpetas locales que los contienen (que ya hemos creado anteriormente). Es- 
to tendremos que establecerlo en el programa antes de comenzar, es decir, la ubi- 
cación de los archivos en nuestra PC, para luego poder subirlos al servidor web (vía 
ETB, por ejemplo). Esto nos permitirá manejar los documentos que nuestros sitios 
contengan mediante la aplicación, casi sin la necesidad de utilizar ningún adminis- 
trador de archivos en particular (como el Explorador de Windows). 

Para definir nuestros sitios en Macromedia Dreamweaver, lo más conveniente se- 
rá utilizar el asistente que el programa brinda. Veamos la manera de configurar 
primero nuestro sitio local, es decir, la carpeta que contendrá los archivos de 
nuestro sitio en nuestro equipo. Lo haremos con el ejemplo anterior. 
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E Nuevo sitio KANOE Eat) 
E Para comenzar a configurar un nuevo sitio, diríjase a Sitio/Nuevo sitio.... 


[2] En el primer paso del asistente, debe definir un nombre para el sitio. Por aho- 
ra, deje la dirección de Internet en blanco. 
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En el segundo paso se le preguntará si desea utilizar alguna tecnología de ser- 
vidor. Seleccione la opción No, no deseo utilizar una tecnología de servidor. 
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» 


4 Luego deberá establecer la carpeta local que contiene los documentos de su 
sitio. Búsquela dentro de su disco y presione Seleccionar. 


C] 





EJ Posteriormente se le preguntará qué tipo de metodología utilizará para subir 
los contenidos al servidor web. Por ahora deje esta decisión pendiente se- 
leccionando la opción Ninguno. 
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EJ Para finalizar el proceso presione el botón Completado. 
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para evitar su sobreescritura. 


Servicios 
Soporte 
TEMP 


Figura 13. Veremos que en el panel Archivos se 





mostrará la estructura jerárquica del sitio definido. 


mm EXPANDIR LA VISTA DE ARCHIVOS 


Una forma de trabajo puede ser la siguiente: elaborar todo nuestro sitio y luego subirlo a nuestro 
servidor web. Si esto es así, será muy útil una de las opciones que ofrece Dreamweaver dentro del 
panel Archivos, el botón Expandir, que nos servirá para ver en una sola ventana los sitios locales y 
remotos. Esta utilidad transforma la aplicación en un cliente FTP para administrar los documentos. 
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Servidor remoto 

Éste será un valor que tendremos que establecer luego de definir nuestro servidor 
web. Estos procedimientos los veremos más adelante, aunque con los conceptos que 
ya conocemos, nos alcanza para poder explicar la forma de definir nuestros sitios 
remotos en Dreamweaver. Ya sea mediante un servicio pago o cualquier otro mé- 
todo, la forma más frecuente de administrar contenidos de sitios web es vía FTP. 
Si bien ya conocemos la función y las características de este tipo de protocolo de trans- 
ferencia de archivos, no tenemos muy en claro todavía la forma de contratar o de con- 
figurar este tipo de servicio. Igualmente, veremos cómo definir esta clase de sitios en 
Dreamweaver, y en otros capítulos ahondaremos más en el tema de los servidores web. 


MIMI lolo PASO A PASO 





Ea En la lista de selección de sitios, vaya a la última opción, Administrar sitios. 


CE aa a 
fuero Édcón we jmena Makhe Teo Cómanda Si Verkirá hada 


Duma 36504 ca l=] > «e + 





mm MÁS NOVEDADES 


Dreamweaver 8 incorpora una nueva modalidad en la Vista Diseño que aumenta ciertos secto- 
res de la pantalla para poder trabajar, por ejemplo, manejando píxel a píxel diversos contenidos. 
También en la Vista Código hay novedades: una completa barra de herramientas que nos permi- 
tirá navegar a través de las diferentes etiquetas para incluirlas más ágil y eficazmente. 
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Comenzar a trabajar 


» 


[2] Seleccione el sitio que desea modificar y presione el botón Editar. 


EE ere A 


Cumin + S6504Al! 


lia 


Aclprryaio 


ATA 





Mantenga las opciones que estableció en el asistente. Al llegar a la configura- 
ción del servidor, seleccione FTP. 


E A IT) 


Básicas | Avanzan | 


Definición del sitio 











ES Defina los datos de su servidor FTP (dirección, usuario y contraseña). Si no 
conoce estos datos, se los puede pedir al proveedor del servicio. 


» 
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» 


gm DaT 


an E 


Definición del sitio ai > 


Compaetteralo EE 


¿Córma erreciá con y pera red? 

[FTP me 

¿Cu en elrombae de houbo la drección FTP del venado: efe? 
mrio g 

¿En qué comparti del prados dere knari k mihn” 

[F egun i i 

Calo Bi iy carda TPF 

(eara 

¿Col e ss coria FTP 

i e 


E urea FTE segura (STE) 


[Emin de prats] 


Ce) ll] 





[5] Para poder corroborar que los datos que fueron configurados en la conexión 
sean correctos, se puede efectuar una prueba mediante el botón Conexión de 
prueba. Si la prueba es exitosa, puede continuar con su trabajo. Si no, verifi- 
que los datos ingresados y pruebe la conexión nuevamente. 


CE aT) 


ia 
= 


T T para impra 


Definición del sitio 


dCi creci cr a perdes red 

[FTP SA 

¿Cuál e ml nioe de hoabo la drección FAP del ida a? 
mdm g 


E utkcar FTP segurá TF 


| Cormión de pruebas ] 


= : 
[suo Orca 


[earn ] [siguert > ] [coneotar ] [ao || 


[Eme 





6 Para ver el contenido del servidor FTP remoto, vaya al panel Archivos y selec- 
cione la opción Vista remota. 


» 
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Comenzar a trabajar 


AS Macromedia Drrannecava ll 





Administrar archivos 

Las tareas de manejo de archivos y carpetas de sitios locales y remotos las pode- 
mos realizar mediante el panel Archivos. 

Para subir contenidos al servidor remoto, hay que ubicarse en la Vista local y ha- 
cer clic derecho sobre la carpeta o el archivo que deseamos transferir, seleccio- 
nando la opción Colocar. Por otro lado, para descargar contenidos utilizaremos 
la opción Obtener del mismo menú. En ambos procedimientos se mostrará el 
progreso en un pequeño cuadro de diálogo. 

Para poder actualizar los contenidos de la Vista remota, debemos presionar el 
botón Actualizar o la tecla E5. 


USERS 





AS Macromedia Drranmecavad ll 
Arch Edició Wer Peete Makke Torio Comandos Su Yebra óyuda 


ina œ LN En A 


e itake E 


Welpe valm 


Figura 14. Mediante el panel Archivos podemos subir 


y descargar elementos a nuestro servidor FTP. 
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Antes de intentar cualquier operación de archivos entre los servidores local y re- 
moto, debemos verificar que el servidor remoto haya establecido la conexión 
correctamente. Para eso, contamos con un botón en la barra de herramientas del 
panel Archivos (el primero de la izquier- 
da), denominado Conectar/desconectar 


Colocando archivo index_r3_c6_f2. gif - 58654 de 58654 bytes escritos. servidor remoto. Presio nando este botó n 
CACA a . 
podremos efectuar rápidamente la co- 


Detalle 
R nexión y la desconexión con nuestro 


Templateslimageslindex_r2_c10,gif - operación Colocar correcta 
Templateslimageslindex_r2_c10_f2.gif - operación Colocar correcta g . ‘ 
Templateslimageslindex_r2_c4.gif - operación Colocar correcta ser vidor F TP Par as aber Sl el ser vidor 
Templateslimageslindex_r2_c4_f2.gif - operación Colocar correcta 


2 
Templateslimageslindex_r2_c5.gif - operación Colocar correcta está conect ado 3 deb emos o b Servar que 


Templateslimageslindex_r2_c5_f2.gif - operación Colocar correcta ; 5 
Templateslimageslindex_r2_c7.gif - operación Colocar correcta i 
Templatesiimagesiindex_r2_c7_f2.gif - operación Colocar correcta la luz verde del botón este encendida. 
Templateslimageslindex_r2_c8.gif - operación Colocar correcta 
Templateslimageslindex_r2_c8_F2.gif - operación Colocar correcta 
Templateslimageslindex_r2_c9.gif - operación Colocar correcta 
Templateslimageslindex_r2_c9_F2.gif - operación Colocar correcta 
Templateslimageslindex_r3_c1.gif - operación Colocar correcta 
Templateslimageslindex_r3_c1_f2.gif - operación Colocar correcta 
Templateslimageslindex_r3_c6.gif - operación Colocar correcta 


NARA TES AE 








Figura 15. El tiempo de descarga o subida 


entre el sitio local y el remoto dependerá del 
ý A 


tamaño de cada archivo o carpeta. 





NUESTRO PRIMER DISEÑO 


En las siguientes explicaciones, las nociones que tratamos de aclarar serán las que 
resuelvan el diseño de nuestras páginas, cosa que haremos a partir del uso de tablas. 
En este proceso, serán de vital importancia los trabajos realizados bajo el planea- 
miento y la dirección artística, como el mapa del sitio y el boceto de la pá- 
gina. Nos centraremos en la página principal, ya que de ésta se desprenderán las 
demás secciones y áreas del sitio. 

Lo primero que haremos será realizar un diseño de página mediante Fireworks, in- 
cluyendo logotipo y secciones de la página, y delimitando sus divisiones. Por su- 
puesto lo exportaremos al formato HTML, tal como vimos en el Capítulo 3. 


o CARPETA RAÍZ 


La carpeta raíz de un sitio de Dreamweaver suele ser la carpeta primaria o principal del si- 
tio local. Su carpeta correspondiente en el sitio remoto también es una carpeta raíz, y suele 
ser idéntica en contenido. Esta carpeta en el servidor será la que ubique el navegador para 
abrir la página principal del sitio. 
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Nuestro primer diseño 


A A AE AA 
ASCE Eikin Wer Sección Molar Teto Comandos Pies Pirkan Apada 


a a M oasi a a ine nT ai i a 
Mr aan 


Creviar al coreo ciao 
Aguia HHL 


Procesa por loba. 
WELA pairan e ed iras 


Configurar pqóna.. 


[imprima 
Confiprsción de PEA. 


Anc ER A 
dls | Yi p 





Figura 16. Los templates (plantillas gráficas) nos serán muy útiles 
para determinar un diseño mediante tablas, gracias a sus divisiones HTML. 


Las tablas serán fundamentales en el diseño de cualquier página, y constituyen la ma- 
nera más sencilla de crear páginas profesionales. A continuación veremos cómo crear 
nuestra página principal del sitio mediante la maqueta gráfica y la implementación de 
tablas, utilizando Macromedia Dreamweaver. Veremos que cada división hecha en Fi- 
reworks, en Dreamweaver será representada como una tabla. Editaremos el conteni- 
do de la página reemplazando las imágenes por los elementos correspondientes. En el 
caso de las imágenes que representen un color plano, conviene eliminarlas y asignar el 
color de fondo mediante el Inspector de propiedades. Para ahorrar espacio en disco, lue- 
go podremos eliminar las imágenes que no usamos. En este caso, también incorpora- 
mos una capa para el texto principal y creamos los enlaces a los diferentes menús, ele- 
mentos que analizaremos más profundamente en el capítulo siguiente. 


E La primera página PASO A PASO 





[a] Exporte el template de Fireworks en formato HTML dentro de la carpeta 
Templates del sitio local. 


[a] Cree un nuevo documento HTML llamado index.html en la carpeta raíz del sitio. 
Haga clic derecho sobre la página para acceder a la opción Propiedades de la 


página. Modifique características como el color de fondo, el del texto, los már- 
genes, el título, etc. Haga clic en Aceptar para volver a la edición de la página. 
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> 


A UN 





4 


p 


a 
i 
E 
ia Productos 
a 
ps] 
E 
H 


6 ¡Eolo | rg =| a ¡17 ELO me 
hiere! fuerte perdeire e) Tera Mr El A A e 


[Propsetades de a pira.. | 





4 Diríjase al menú Insertar/Objetos de imagen/HTML de Fireworks para impor- 
tar el template creado. 


ll Seleccione el archivo index.html creado por Fireworks anteriormente dentro de 
la carpeta Templates del sitio. 
A Ad AT) 


tosga t-o- TAn) p 


ormako direy AE ioiii Pireju 
Fuente Fuera pardetert w ia Mg sel 





6 Se le requerirá que almacene la página actual. Para realizar esta acción, guár- 
dela en la carpeta raíz del sitio con el nombre de index.html mediante el me- 
nú Archivo/Guardar como.... 


» 
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Nuestro primer diseño 


2 a Ss Esper 1,1500 Erpre] 
O heard 
H- a 


mam d 


Todos les daria [e i a hii" a 


Formado: bromas e Estilo u w | = |B f EZIN we 
Fumie | piangi pradeti e P mo {E iz u a 


¡Propiedades de la página: .. | 





Realice las modificaciones necesarias con las tablas creadas. Agregue tex- 
tos, títulos, Ítems en el menú, etc. 


8 Cuando termine, guarde los cambios mediante Archivo/Guardar. También puede 
visualizarlo en su navegador con la opción Archivo/Vista previa en el navegador. 


E RESUMEN 


Conocer los programas que utilizamos es vital para proceder adecuadamente y no hacer cosas de 
más. Para eso, conocimos en profundidad Macromedia Dreamweaver 8 y todas sus característi- 
cas y tareas básicas. A modo de introducción, también vimos la manera más sencilla de crear una 
página inicial mediante tablas y una maqueta de Fireworks, conjugando así el uso de ambos pro- 
gramas. En el próximo capítulo comenzaremos a analizar los elementos y su inserción dentro del 
espacio de trabajo de Dreamweaver para la creación de páginas profesionales. 
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TEST DE AUTOEVALUACIÓN 


1 ¿Para qué sirve Macromedia Dreamweaver 8? 


2 ¿Cuáles son sus características más noto- 


rias? 


3 Explique el proceso de instalación de 


Dreamweaver 8. 


4 ¿Qué modo de trabajo debemos seleccio- 
nar antes de comenzar a usar Dreamwea- 


ver: Diseñador o Programador? 


5 ¿Cuántas vistas posee el espacio de traba- 


jo del programa? 


6 Explique cada una de las vistas menciona- 


das en el punto anterior. 
7 ¿De qué manera nos conviene organizar la 
estructura de carpetas de nuestros sitios 


locales? 


8 Explique el proceso de definición de un si- 


tio en Dreamweaver. 
9 ¿Para qué sirve el panel Archivos? 
10 Explique paso a paso la manera de incor- 


porar un template [plantilla] de Fireworks 


en formato HTML en Dreamweaver. 
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v ACTIVIDADES 


EJERCICIOS PRÁCTICOS 


Y Seleccione la modalidad de trabajo Pro- 
gramador y compare el área de trabajo con 


la de la modalidad Diseñador. 


Y Intente insertar una imagen en una página 
nueva, primero mediante la Vista Código y 


luego mediante la Vista Diseño. 


Y Cree en un papel un boceto estructural del 
arbol de directorios de un sitio de una em- 


presa de venta de cerámicos. 


Y Cree en un papel un boceto estructural del 


arbol de directorios de un sitio personal. 


Y Identifique las diferencias entre los boce- 


tos de los dos puntos anteriores. 


CREACIÓN DE SITIOS WEB 





Dreamweaver 
avanzado 


Para desarrollar sitios web, es importante 
conocer todos los elementos que pueden 
componer este tipo de documentos. 
Anteriormente, hemos analizado la 
inserción de elementos como imágenes, 
textos y vinculos mediante la escritura 
directa del código HTML. A partir de ahora 
aprenderemos a implementar estos 

y los restantes elementos que pueden 


conformar nuestras páginas. 


SERVICIO DE ATENCIÓN AL LECTOR: lectoresOmpediciones.com 


Inserción de imágenes 
Modificar una imagen 
Imágenes de sustitución 
Barras de navegación 
Álbum de fotos web 


Elementos de texto 

Las cabeceras de texto 

Las listas 
Los enlaces 

Los enlaces en Dreamweaver 
Las tablas 

Definir las filas 

Definir las celdas 

Tablas en Dreamweaver 

Dividir y combinar celdas 
Hojas de estilo 

La sintaxis 

Las clases 

CSS: propiedades 

de las etiquetas 

CSS en Dreamweaver 

Capas (layers) 

Las capas de Dreamweaver 
Los marcos 

Modificadores 

Enlaces a marcos 

Insertar marcos 

en Dreamweaver 
Resumen 
Actividades 
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INSERCIÓN DE IMÁGENES 


Como ya sabemos, los diferentes tipos de imágenes que podemos incluir en nues- 
tras páginas web serán de vital importancia para mejorar lo visual y aumentar el 
atractivo que el usuario puede encontrar en el sitio. 

Macromedia Dreamweaver 8 nos brinda varias posibilidades relacionadas con este 
tipo de elementos gráficos. Todas ellas se dedican a incorporar formatos de imagen 
a las páginas en diferentes contextos y con diversas funciones. 


Como primera opción, podemos destacar la que se dedica exclusivamente a inser- 
tar imágenes individuales, que pueden actuar como vínculo o no, es decir, que al 
hacer clic con el mouse sobre ellas puedan llevarnos a otra página o que simplemen- 
te sean insertadas para representar una idea y ser visualizadas. A esta opción de in- 
sertar imagen llegamos accediendo al menú Insertar/Imagen. A continuación anali- 
zamos el proceso para insertar una imagen en nuestra página. 


E insertar imagen AO AO 





al Diríjase al menú Insertar/Imagen..., o bien presione el botón Imágenes de la ba- 
rra Insertar y seleccione la opción Imagen. 


A EA 
nda Edición Wer laa boi Tita Comandos la veaa Auda 


Comün + 


F Bari de hitga 


i Dispi 5óñd mirathi ritagli 
t Diane maei rim ara pa 
TA Thai iam iora piyaa 


>= TA Ea 


Formato Merge Eh | lero A Ja A EXIME vos 


Puerta | Fuente predeber i Tam | Hing w fel [S is e i 





2 Busque en su disco la imagen que desea insertar. Es conveniente que ésta ya se 
encuentre en la carpeta de imágenes del sitio (o de su correspondiente sección). 


» 
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Inserción de imágenes 


» 


Puede seleccionar Ver previa de imagen al pie de la ventana para previsualizar 
las imágenes. Presione Aceptar para insertar la imagen. 


AN 


REN 


Felecciónas rúsbia de chiva de CH Snioma ide aihn [ Gion y biisii | 
(O Puana ka daia 


Bucmen | C) imagna = i l ii 


ui ici poc "a z 


Anan A AO 
Archena de magen [gi pg” peg” pro] w 


F] 
Eracar . ba bal Marna he 
Tatier imi na en la deiren de pie, 


rra M Esto Mero se[ o Jar ERAN me 
Fuerbe | Puarto predetsrr 0 Tam Mog Y Ti da da an de 


—E 


AAA AA A 
¿Procesdades de i pignan- j 





Debe asignar a la imagen un texto alternativo y una descripción (recuerde que 
esto es útil si por alguna razón la imagen no se muestra en el navegador del 
cliente). Presione Aceptar. 


A a 
nd pao MOB: 
[kendati S 


153) Codigo conos | a cio | Ti [Docena estilo 1 Ti n t E. ¡a E. a. 


Ej i E si En o Er e Pi o mn TT Y 7 prr a 
dddilajdalasoebiiiihisiali, dasidlaaza astobiiliiiibiiiiliiislisa, - o aiiiliia added ld ld dos le 


A AAA AO 


Trio akorio, Mlio x 
Descrioción lega; | esa, rábano 


Sing desta nbroduer esta información al restar obietos, [nia 


E E jis 


ME EART rg a 55 jm £ EXAR vab 


Fuente | puenta predstan w| Tan Mep Y i [E JE Si Ot 


r 
[Propiedades de la página día j 
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» 


El La imagen se insertará en su documento. Si la selecciona, puede modificar 
sus características (tamaño, vínculo, alineación, borde, texto alternativo, etc.) 
mediante el Inspector de propiedades. 

A A A A 
facha Bdn ve jate Mabes Tariy Comandos ti Vertará faala 
Comin = aA EpKgd-- +- ț0EUD- p 


| karia hini" W AN 


salio | aran | 34 eeno | mke: [Dorumeren se tdo Heta cma 
B.: E F . p B A ES TT. AAA ir w Ru AAA AAAA 7 
E ts ua Lii 


Aqa eie Eia 
An [550 Drijen maene] ó ak | Hizio =" Clase | pre y: 
44 1150 i tin w GOA 
Espacio Y Borde E | 
LY OOO iph E Meda | Predatirmnibdo 





Modificar una imagen 

Entre las diversas propiedades que tiene cada objeto podremos modificar algu- 
nas de sus opciones, y para cada tipo de elemento se ofrecerán diferentes carac- 
terísticas. Estas modificaciones las deberemos realizar a través del Inspector de 
propiedades de Dreamweaver. 

Entonces, si estamos hablando de imágenes, el Inspector de propiedades se adap- 
tará a este componente gráfico en particular y nos mostrará algunas posibilida- 
des para modificar las propiedades específicas de este tipo de objeto, como el 
tamaño, la alineación con respecto al texto, su link o su texto alternativo. 


oi ALINEACIÓN DE LAS IMÁGENES 


Una imagen puede poseer diferentes alineaciones: respecto a la página o respecto al texto que la 
acompaña. En el primer caso, las opciones son las mismas que para cualquiera de los elementos 
web: CENTER (centrada), LEFT (a la izquierda) o RIGHT (a la derecha). En el segundo caso, podremos 


especificar si está alineada al texto, si lo está respecto a su margen superior o inferior, etc. 
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Inserción de imágenes 


Las propiedades de las imágenes GUÍA VISUAL 1 


¿o w Propiedades 


Imagen, 17K 


Clase | Ninguno 





BO i 






Zo 
y 






Espacio Y 





Espacio H Orig base 


O Modificar alto de la imagen. 

O Modificar ancho de la imagen. 

© Indicar un vínculo (o link) para la imagen. 

O Establecer el origen del archivo de imagen. 

O Alt incorpora a la imagen un texto alternativo. 

O Permite seleccionar el estilo que se aplicará a la imagen (CSS). 

O Permite aclarar el tipo de alineación horizontal que tendrá la imagen respec- 
to al texto. 

© Indica un valor de espesor para el borde de la imagen. 

O Destino permite establecer de qué manera se mostrará el link en el navegador 
(esto se utiliza principalmente cuando se trabaja con marcos). 

(D Establece una herramienta (puntero o zonas interactivas). 


Imágenes de sustitución 

Otra de las útiles opciones que ofrece Macromedia Dreamweaver respecto a la incor- 
poración de gráficos es la de las imágenes de sustitución. Esta opción es un sistema 
de reemplazo dinámico de imágenes cuando el usuario pasa el mouse por sobre la 
imagen. Se trata siempre de imágenes con vínculos y se utiliza principalmente para bo- 
tones. Cuando agreguemos una imagen de sustitución, tendremos que dar un valor de 


mm EL TEXTO ALTERNATIVO 


Veremos que en ciertas páginas, cuando pasamos el mouse sobre alguna imagen y lo dejamos allí 
por unos segundos, se nos presenta por encima de ella un pequeño cuadro que contiene determi- 
nado texto, tanto si la imagen posee como si no posee link. Éste es el texto alternativo, del que ya 
hablamos anteriormente y que se identifica en los diversos tags con el modificador ALT. 
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archivo de imagen inicial, otro final y un vínculo al elemento. Luego, cuando el usua- 
rio pase el puntero sobre la imagen para acceder al link, ésta se modificará a su 
segundo estado, mostrando la imagen secundaria. Aprendamos cómo funciona. 





E Sustitución de imágenes AO AO 


1 Vaya a Insertar/Objetos de imagen/Imagen de sustitución o presione el botón 
Imágenes de la barra Insertar y seleccione la opción Imagen de sustitución. 


A A AE AENA 
ketheg Ddi Ver paete Modos leio Correos bo Venga Ayuda 
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El Para establecer los valores correspondientes a los estados de la imagen, pre- 
sione el botón Examinar. 


AA aid M B 


a 
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Inserción de imágenes 


» 


En Imagen original, seleccione la imagen que se verá de forma predeterminada. 


2 Mac pimeiia Elamarrnonareno 1 Asis Mg ica Bt AL 
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EJ En Imagen de sustitución, seleccione la imagen que se verá cuando el usuario 
pase el mouse sobre la original. 


bia puneti Camarasa H- [E Abis rl paca Bol (RADA) 
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[Propietades de la págra...] 





3] Complete el Texto alternativo y el vínculo de la imagen (Al hacerse clic, ir a URL) y 
presione Aceptar. El casillero Carga previa de imagen de sustitución hace que la 
imagen sustituta se baje cuando se carga la página en el navegador, evitando que 
se produzcan demoras cuando el usuario pasa el mouse. 


» 
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A ON 


AA ATA To 


Huber de la ree | Snage 
Image oriana: [iraa botor sionl rora, gi 
imagan die abtine | per botones olor amriha g 
[E] Canga preis de mepe de patkuoin 
Testo stamatiyoc |b a 
Al hacerse de, all: (avada bm 


Formato: run mo Esto | Megas *[ us ]m £ EXA mojo pot 
Fuerte | Puerto predetarr e| Tam Mna pe mi da da a e) OOOO 


ae 
[Propiedades de la página... ] 





6 Verá que se insertó la imagen indicada (sólo se visualiza la original). 
Al verlo en el navegador, en su estado normal se verá la imagen original. 


El Al pasar el mouse por arriba de la imagen, ésta se intercambiará por la ima- 
gen de sustitución. 
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Barras de navegación 

Esta característica que brinda Dreamweaver 8 es muy útil y la podemos utilizar pa- 
ra crear menús de diferentes estilos, tanto verticales como horizontales. Se trata de 
una agrupación de imágenes de sustitución que conforman una barra con determi- 
nada alineación y que puede resultar muy atractiva para nuestras páginas. 





lc | jor |= PE Tiu iD AR bd B 
iE LALA Re EEELLE m, aS a Lia Mo 2 ES LiL, T FEE ¿la ALL Se IPUR ELEL A 


HE ao 























Dererdos de barra de rare aciór 
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Figura 1. Aquí se visualiza la herramienta Barra de navegación. 
En este caso, se está creando una barra de navegación con tres items. 


Para crear una barra de navegación debemos recurrir a la opción Barra de navega- 
ción ubicada en el menú Insertar/Objetos de imagen. Allí se nos presentará un nue- 
vo cuadro donde tenemos la opción de ir agregando ítems para nuestro menú (sig- 
no +). Esta herramienta, a pesar de parecer muy compleja, es bastante sencilla por 
ser similar a la de Imagen de sustitución, es decir, una vez que agregamos los ítems 
que deseamos incluir en la barra, el proceso es prácticamente igual al de sustitución. 
Para eso, en cada ítem deberemos detallar un nombre, una imagen para el estado 
normal del botón (Imagen arriba), una imagen de sustitución (Sobre imagen), una 


nm EL DESTINO DE LOS LINKS 


El dato que se identifica como el Destino (target) del link, tiene cuatro opciones por defecto: _BBLANK 
(inicia el enlace en una ventana nueva), PARENT (si el documento está incluido en marcos, el enla- 
ce se mostrará en toda la zona de definición del marco en cuestión), _SELF (el enlace se muestra en 


la misma ventana que la actual) y _TOP (muestra la página en una ventana completa sin marcos). 
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imagen para el estado presionado (Imagen abajo) y una imagen de sustitución para 
esta última (Sobre mientras imagen abajo). También contamos con la opción para 
adicionar un Texto alternativo a cada botón y, además, tenemos que indicar la pági- 
na a la que se accederá cuando se lo presione, es decir, el vínculo de cada elemen- 
to. En la casilla de texto Insertar podremos especificar si la barra será vertical u ho- 
rizontal. En la parte superior contamos con cuatro botones que nos permitirán 
agregar ítems (+) o eliminarlos (-) y subir o descender su posición. 


3 Pocinmento de ul: Microsoft Internet Explorer 
Ardo Ldcón vai Pavontos — Mierstesrtia — fouds 


e pl 4 J 
"j =| 0 A bege Perakas meda A) | 


i El tol rr cena bi 


| BOTON 1 | Borona | eorona | 


pil 








Figura 2. El resultado de la herramienta de Barra de navegación 
de la figura anterior genera una barra de tres botones horizontales 
con imágenes de sustitución al pasar el mouse sobre algún botón. 


Album de fotos web 

Es muy probable que hayamos escuchado hablar de los blogs o de los álbumes de 
fotos online como herramientas para publicar fotografías en Internet. Como es- 
tamos creando un sitio profesional, no queda bien que sólo incorporemos un enla- 
ce a un álbum gratuito en algún otro servidor. Por eso, con Dreamweaver podremos 
crear un sencillo pero útil álbum para publicar en nuestro sitio. Si el sitio es perso- 
nal, esta herramienta se puede utilizar para crear un álbum de fotografías familiares 
y de amigos. En cambio, si es un sitio comercial, podemos crear catálogos de pro- 
ductos o agregar fotografías institucionales. 


o THUMBNAILS 


También denominados miniaturas, vistas preliminares o vistas previas, los thumbnails son imáge- 
nes pequeñas que se cargan para mostrar el contenido parcial o total de una imagen. En el ámbito 
web, es muy común que al presionar sobre ellas se acceda a la imagen en su tamaño original y en 


su totalidad. Esto se realiza para reducir el tiempo de carga de una página con muchas imágenes. 


Inserción de imágenes 


Podremos definir el álbum como una sección particular o como una alternativa pa- 
ra mostrar fotografías de cada sección. Es válido aclarar que para poder utilizar es- 
te comando debemos contar con Dreamweaver 8 y con Fireworks 8, ya que pa- 
ra crear los álbumes se combinarán ambas herramientas. Dreamweaver creará el ál- 
bum y Fireworks procesará las imágenes y creará las miniaturas (thumbnails). 


Bien, para crear un álbum web, lo primero que debemos hacer es agrupar todas las 
imágenes que deseamos que se muestren en una misma carpeta. No será relevante 
la ubicación de este directorio dentro del equipo ya que luego las imágenes se co- 
plarán a una carpeta que nosotros especifiquemos dentro del sitio. Cuando ejecute- 
mos el comando, todo se realizará automáticamente después de que detallemos al- 
gunos valores. Veamos entonces cómo crear un álbum de fotos personalizado para 
nuestro sitio mediante Macromedia Dreamweaver y Macromedia Fireworks. 


E Creación de álbum web PASO A PASO 





o Cree una carpeta para agrupar todas las imágenes que quiere incluir. 
[a En Dreamweaver, diríjase a Comandos/Crear álbum de fotos web.... 


Detalle las características del álbum como títulos, subtítulos y epígrafe, carpe- 
ta de origen de las imágenes (paso 1), carpeta de destino (dentro del sitio) y ta- 
maño y organización de las miniaturas. Para crear el álbum, presione Aceptar. 
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» 


4 A continuación se abrirá automáticamente Fireworks y procesará las imágenes 
y sus miniaturas. Aguarde. 
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a Cuando el proceso finalice, Dreamweaver le mostrará un aviso acerca de ello. 
Presione Aceptar para terminar. 
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EJ El áloum se creará. Puede modificar las propiedades de los elementos como 
usted prefiera (fuentes, tamaños, colores, orden de las imágenes, etc.). 
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ELEMENTOS DE TEXTO 


En capítulos anteriores hemos conocido la manera más sencilla de incorporar y mo- 
dificar las propiedades de texto plano en nuestras páginas web, siempre bajo la co- 
dificación HMTL. El texto es la base de toda expresión gráfica y visual, es decir, la 
herramienta imprescindible para expresar ideas y dar a conocer el contenido de 
nuestros pensamientos y opiniones. Como los sitios web están destinados a comu- 
nicar una idea, será muy importante que sus páginas posean bastante contenido tex- 
tual que las explique y desarrolle los contenidos que éstas desean transmitir. 

Para poder incluir los textos correspondientes a cada sección de nuestras páginas, 
es ideal tenerlos definidos previamente en hojas de papel o en documentos de 
texto digital, sin formato o estilo visual alguno, para así poder aplicarle estas 


nm QUICK TAG EDITOR 


Quick Tag Editor es una herramienta de Dreamweaver 8 para poder editar el código de la página sin 
salir de la Vista Diseño. Es utilizado para insertar tramos de código en el documento de manera ágil. 
Para lograr eso, nos ubicamos en el sector de la página donde queremos insertar el código y pre- 
sionamos la combinación de teclas CONTROL+T. Se abrirá un cuadro con la leyenda Insertar HTML. 
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características posteriormente, ya sea a través de la propia página o a través de las 
hojas de estilo (CSS), que analizaremos luego. Recordemos que el estableci- 
miento de los textos se presentará en la definición de contenidos, dentro de la 
fase de planeamiento del sitio. 

Dentro de Dreamweaver 8 tenemos una infinidad de opciones para crear y per- 
sonalizar los diferentes elementos de texto que incluyamos en cada una de las pá- 
ginas. Comencemos a analizarlos. 


Las cabeceras de texto 

Cuando compramos un libro, una revista o el diario, podemos analizar el tipo de 
estructura y formato que tienen los textos, especialmente los títulos. Podemos 
notar que en la mayoría de los casos suelen seguir un estilo visual determina- 
do, por lo menos para cada sección. Esto se debe a que cada título o subtítulo 
posee una cierta relevancia y es destacado de diferente manera, aunque la mayo- 
ría de las veces la diferencia radica en el tamaño. 

Bien, tal como esto sucede en las publicaciones impresas, el lenguaje HTML 
también posee una norma que incluye la diferenciación de seis estilos de títulos, 
aquí llamados cabeceras. Como todo elemento del lenguaje HTML, las cabece- 
ras podrán ser insertadas mediante código, aunque Dreamweaver también nos 
dará la opción de hacerlo más fácilmente. 

El tag que hay que utilizar para incluir las diferentes cabeceras mediante el desa- 
rrollo H'TML será <Hx> y su correspondiente cierre, </Hx>, donde x será el nú- 
mero de cabecera correlativo. Las cabeceras estándar se identifican del 1 al 6, 
clasificándose de mayor a menor según el tamaño del texto, siendo así la etique- 
ta <H1> y </H1> la que muestra el texto más grande y <H6> y </H6>, el menor. 
Entonces, por ejemplo, si deseamos incluir dos textos de diferentes tamaños, 
tendríamos que escribir dentro del cuerpo de la página: 


<Hi>Esta es la cabecera mayor</Hl> 
<H3>Esta es una menor</H3> 


o ENCABEZADOS EN LAS PROPIEDADES 


Otra forma de aplicar algún estilo de cabecera a nuestros textos es mediante el Inspector de propie- 
dades. Para ello deberemos seleccionar con el cursor el tramo de texto que deseamos modificar, y 
en la parte superior izquierda de este panel, utilizar la opción llamada Formato. Allí encontraremos 
los seis estilos, seleccionamos uno de los encabezados y quedará aplicado al texto seleccionado. 
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Elementos de texto 


Para lograr incluir cabeceras mediante Dreamweaver 8, debemos recurrir al menú 
Insertar y allí seleccionar las opciones HTML/Objetos de texto, y la cabecera que desea- 
mos, para luego escribir el texto en la línea correspondiente del documento. En ambos 
casos, el navegador mostrará lo que se puede apreciar en la siguiente figura. 


3 Documento sin título - Microsoft Internet dy 
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Esta es la cabecera mayor 


Esta es una menor 





Figura 3. En este caso, el navegador muestra dos cabeceras de texto diferentes. 


Las listas 

Es probable que necesitemos ordenar algunos contenidos por ítem o numerados, 
haciendo así listas ordenadas o desordenadas. En el código HTML existe una eti- 
queta que identifica a las listas ordenadas y otra para las desordenadas. En el primer 
caso utilizaremos Ordered List (lista ordenada), cuyo tag es <OL> y su cierre, </OL>, 
mientras que para el segundo, corresponde una Unordered List (lista desordenada) 
cuyo tag es <UL> y su cierre, </UL>. Dentro de estas etiquetas iremos agregando los 
ítems, que de ahora en adelante llamaremos elementos. 


Cada elemento se identifica dentro de una lista con el tag <LI> y su cierre, </LI>, 
tanto en las listas ordenadas como en las aleatorias. Por ejemplo, si deseamos 
crear una lista de cuatro elementos que no tengan un orden o numeración par- 
ticular, el código dentro del cuerpo de la página sería el siguiente: 


oi DISEÑO Y CÓDIGO 


Será muy importante que no olvidemos que la Vista Dividir nos permite trabajar con el código y 
el diseño paralelamente. Esto será de gran ayuda en muchos casos que necesitemos ver el có- 
digo a medida que vamos diseñando visualmente nuestra página, como por ejemplo, si quere- 
mos detectar errores o simplemente aprender más a acerca del lenguaje HTML. 
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<UL> 
<LI>Pri mer elemento</Ll> 
<LI>Segundo el emento</Ll> 
<Ll>Tercer elemento</LI> 
<LI>Cuarto elemento</Ll> 
</UL> 


E Ad 


Archivo Edición Yer Favoritos Herramientas Ayuda 


J > E a D 2 ) Búsqueda Y { Favoritos CA) Multimedia (4) 


Dirección E) Cusitios|Empirelayuda. htrnl 


Primer elemento 
Segundo elemento 
Tercer elemento 
Cuarto elemento 





Figura 4. Visualización en el navegador de una lista aleatoria creada con el tag <UL>. 


Por el contrario, si deseamos ordenar y numerar la lista, deberíamos reemplazar el tag 
<UL> por <0L>, por lo que el código quedaría expresado de la siguiente manera: 


<OL> 
<LI>Pri mer elemento</Ll> 
<LI>Segundo el emento</Ll> 
<LI>Tercer elemento</LI> 
<LI>Cuarto elemento</Ll> 
</ OL> 


mm MAPAS DE IMÁGENES 


Un mapa de imágenes es una imagen insertada en Dreamweaver dividida en áreas. Estas áreas son 
llamadas zonas interactivas, y son invisibles al navegador, pero cuando el usuario hace clic en una 
de ellas, se producirá una acción (normalmente un enlace). Para definir zonas interactivas tenemos 


que seleccionar alguna de las formas disponibles en el Inspector de propiedades de imágenes. 


Elementos de texto 
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Figura 5. Visualización en el navegador de una lista 
ordenada numéricamente mediante el tag <OL>. 


Para incluir listas a nuestras páginas mediante Dreamweaver 8, debemos ir a Inser- 
tar/HTML/Objetos de texto y seleccionar la opción Lista sin ordenar o Lista ordenada. 
En ambos casos, el funcionamiento es similar al de Microsoft Word, es decir, al apre- 
tar la tecla ENTER aparece un nuevo número correlativo o un nuevo símbolo. Como 
en Word, para finalizar la lista, basta con apretar dos veces seguidas la tecla ENTER. 
Para incluir elementos individuales a las listas, ubicamos el cursor en el lugar en 
que queremos agregar algo y seleccionamos la opción Insertar/HTML/Objetos de 
texto/Elemento de lista, que activará la Vista Dividir para que agreguemos ele- 
mentos mediante la escritura dentro del panel de código. 

De hecho, en Dreamweaver 8 tenemos la posibilidad de modificar la lista una 
vez creada y sin tocar el código fuente. Es mediante el Inspector de propiedades. 
Veremos que debajo del estilo de texto aparecen cuatro botones: el primero in- 
dica que la lista estará sin ordenar. Por el contrario, el segundo ordenará sus ele- 
mentos y los dos últimos habilitan o deshabilitan la sangría de los elementos res- 
pecto al margen izquierdo de la página. 
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Figura 6. Estos botones nos permiten modificar las propiedades 
de las listas y su sangría con respecto al resto del texto. 


Inspector de propiedades 
La forma más adecuada y sencilla de establecer las propiedades de los textos en Ma- 
cromedia Dreamweaver 8 es mediante el Inspector de propiedades. Podremos estable- 
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cer las características del texto allí y luego comenzar a escribir o bien escribir primero 
sin darle formato al texto, y luego seleccionar el sector de texto que deseamos perso- 
nalizar y retocarlo mediante este panel. Veamos cada sector que lo compone. 
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Figura 7. Con las opciones básicas podemos 
dar formato muy fácilmente a nuestros textos. 





















Propiedades de texto GUÍA VISUAL 2 
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O Formato de encabezados. © Vínculo y destino del mismo en el texto. 
© Tipo de estilo (CSS). O Convertir en listas. 
© Aplicar negrita. © Color de la fuente. 
© Aplicar cursiva. © Tamaño de la tipografía. 
O Alineación del texto. (DM Estilo de tipografía. 
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LOS ENLACES 


Como ya sabemos, un enlace es un elemento contenido dentro de una página 
web que comunica a ésta con otra página web del mismo sitio, un sitio externo, 
un archivo para descargar, una imagen o cualquier otro objeto. También deno- 
minados links, vínculos o hipervínculos, los enlaces pueden estar representados 
dentro de las páginas por dos elementos claves: texto o imágenes, aunque tam- 
bién pueden estar contenidos dentro de otros componentes, como las animacio- 
nes multimedia de Macromedia Flash o aplicaciones interactivas, como las de Ja- 
va (hablaremos de ellas en próximos capítulos). 

El funcionamiento de un link es bastante simple: al presionar con el mouse so- 
bre el vínculo, automáticamente se iniciará la conexión con el elemento de des- 
tino. Recordemos que cuando pasamos el mouse sobre el link, nuestro cursor se 
convertirá en una mano con el dedo índice señalando. 

Con respecto a su clasificación, se dividen básicamente en dos tipos: los enlaces 
a páginas o archivos y los vínculos de correo electrónico. Estos últimos eje- 
cutan el cliente de correo predeterminado para el envío de mensajes en la má- 
quina del cliente, es decir, el programa de correo electrónico predeterminado. 
Los enlaces con formato de texto poseen un formato de fuente estándar: texto 
de color azul y subrayado por debajo. Un link de texto posee cuatro estados: 
normal, link visitado, con el mouse encima (mouseover) y link activo. En el 
formato estándar de link textual, el estado normal y el estado mouseover tienen 
el mismo formato (texto azul y subrayado), mientras que el link activo se colo- 
rea de color rojo y el ya visitado, de color violeta. Todos estos parámetros pue- 
den ser modificados como cualquier texto tradicional (excepto mouseover), aun- 
que es mucho más práctico hacerlo mediante el uso de hojas de estilo, factor que 
analizaremos más adelante en este mismo capítulo. 

Si nos tenemos que referir a los links de imagen, como ya hemos visto anterior- 
mente con las imágenes de sustitución, éstos poseen dos estados: normal y con 
mouseover. También es válido aclarar que la coloración que se aplica a los links 
de texto (como link visitado y activo), se establecerá en el borde de la imagen, 
si es que decidimos aplicarle esta propiedad. 


nm LINK A E-MAILS 


Un link a un correo electrónico se destaca en el código fuente de la página por contener un coman- 
do especial dentro del modificador HREF de la etiqueta <A>. Se trata de mailto:direcciondemail, don- 
de direcciondemail será la dirección de destino del mensaje. Un enlace de correo electrónico visto 
en código fuente sería: <A HREF=mailto:jose(Vyahoo.com.ar> Enviar un correo electrónico</A>. 
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Los enlaces en Dreamweaver 

Ya hemos visto la forma de insertar links a nuestras páginas mediante la escri- 
tura del código HTML y el uso del comando <A HREF=vínculo>. 

Macromedia Dreamweaver nos presenta una forma mucho más dinámica y efi- 
caz de realizar esta tarea, recurriendo simplemente al menú Insertar. Allí conta- 
mos con dos opciones: Hipervínculo y Vínculo de correo electrónico. Veamos có- 
mo insertar un link mediante el programa. 





SRT EAS PASO A PASO 


E Diríjase al menú Insertar y seleccione la opción Hipervínculo. 





2] Configure los valores del link: nombre, texto, vínculo, target (Destino), etc. 
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mm LAS REGLAS 


Veremos que en los límites izquierdo y superior del área de trabajo de Dreamweaver conta- 
mos con dos reglas. Ellas nos servirán mucho como guías para la disposición de los diferen- 
tes elementos, y sólo están presentes en la Vista Diseño. Para modificar el valor en el que se 
miden las distancias en las reglas, podemos ir al menú Ver/Reglas. 
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» 


Al presionar Aceptar, se incluirá el enlace en el sector de la página en el que 
se encuentre ubicado. 


El Visualice y compruebe el buen funcionamiento de cada enlace en su navegador. 


E AA E G 


Archivo Edición Yer Favoritos Herramientas Ayuda 


O Atrás ~ QJ |x) a W £ ) Búsqueda Y 2 Favoritos a Multimedia ES) 


E) CusitiosEmpirel ayuda, htrnl v Ir 





IR A YAHOQI 





Las anclas o anclajes 

Dentro de una página web, también podemos incluir enlaces que hagan referencia 
hacia otro sector de la misma página, para que el usuario pueda navegar por ella si 
el contenido es muy amplio y si decidimos realizar un índice de él. Veamos un 
ejemplo concreto siguiendo paso a paso las siguientes explicaciones. 





E Anclar contenidos PASO A PASO 


A Redacte los contenidos que desea anclar. 


E] Posiciónese en el lugar en el que quiere agregar el ancla. Diríjase al menú Inser- 
tar y seleccione la opción Anclaje con nombre. 


Establezca el nombre del ancla y haga clic en Aceptar. Conviene establecer 
nombres que luego resulten fáciles de identificar. 


» 


nm CONVERTIR CAPAS EN TABLAS 


Algunos navegadores antiguos no permiten la visualización de capas. Para que nuestras pá- 
ginas sean visibles en cualquier browser, podremos convertir las capas en tablas. Para eso 
tenemos que recurrir al menú Modificar/Convertir y allí seleccionar la opción Capas a tablas. 
También podremos realizar el proceso inverso, es decir, convertir tablas en capas. 
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» 


a Se insertará un objeto de ancla en el lugar que seleccionó. 


-) espacidad onclear que podría alcanzar objetor en China Sin embargo el cohete bavo derpertector y cayó antes de lo 
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remover el trozo de material adane que sobrezalla del escudo bésmco de la nave 

À pera de erp, la NASA debatit e era necesario que los astrosintas Pies Sellers y Mike FOSSUM rentran la averia 
dirante La tercera Corñunata espacial. programada púra el muércolés Fmaasbnénte se pezohó que Discovery podrá vetarnar 
xin ser reparado 

Ayer los artronanias reabreron la prentra comenta espacial para probar, justamente, una técmca que podria haber ndo 
tajada para reporar los protectores Lénicos 


Tras los ensayos de Corea del Norte, India tambien probó un misil de largo alcance uy 
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E Sitúese en el sector de la página en el que desea insertar el enlace al ancla- 


je y vaya a Insertar/Hipervinculo. 
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6 En las propiedades de Vínculo del enlace, seleccione el nombre del ancla co- 
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rrespondiente, luego de dar un título al link. 
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LAS TABLAS 


Dentro del lenguaje HTML, las tablas son probablemente la manera más sencilla y 
práctica de organizar la información dentro de una página, y también, como ya he- 
mos visto al combinar Dreamweaver con Fireworks, son útiles para el maqueteado de 
páginas con imágenes. Las tablas nos permitirán organizar y representar cualquier ele- 
mento de nuestra página en filas y columnas, separando los contenidos entre sí. 

En HTML las tablas se definirán entre las directivas <TABLE> y su correspondien- 
te cierre </TABLE>. Dentro de este tag encontramos determinados modificadores 
que dan formato a la tabla. Entre ellos podemos destacar BORDER=tamaño, que 
aplica un tamaño de borde a la totalidad de la tabla (debemos especificarlo en 
cantidad de puntos); también están los modificadores CELLSPACING=tamaño y 
CELLPADING=tamaño, que determinan el número de puntos que separan a las cel- 
das entre sí y el espacio en puntos que separará al borde de las mismas del con- 
tenido, respectivamente; otros modificadores importantes son WIDTH=tamaño, que 
indicará el ancho de la tabla respecto a la página, y HEIGHT=tamaño, que hará lo 
mismo pero con respecto al largo de la tabla. El valor de estos dos últimos modi- 
ficadores puede ser detallado en puntos (píxeles) o porcentajes (por ejemplo, 60% 
de la página). También se destaca el comando modificador ALIGN=alineación, que 
determina la alineación de la tabla en la página. Sus variantes son las tradiciona- 
les LEFT, CENTER y RIGHT. Finalmente, encontramos los modificadores de los colo- 
res de fondo y de borde: BGCOLOR=color y BORDERCOLOR=color, respectivamente. 
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Dentro del tag <TABLE> y </TABLE> que determina la tabla en sí, tendremos que defi- 
nir algunos factores para completar su estructura, como el título, las filas y las celdas. 
Fl título de la tabla se definirá con el tag interno <CAPTION>título</CAPTION>, donde 
título representa al texto del mismo. Por ejemplo, el código de una tabla con 100% de 
ancho, borde rojo de 1 de ancho, alineada al centro, con fondo gris sería el siguiente: 


<table width="100%” border="1” align="center” bordercolor="*FF0000” 
bgcolor="#CCCCCC"></ tabl e> 


Definir las filas 

Dentro de una tabla tendremos que incluir la cantidad de filas que creamos ne- 
cesaria mediante otro tag (se inserta uno por cada fila dentro de la etiqueta 
<TABLE>). El tag mencionado es <TR>, con su correspondiente etiqueta de cierre 
</TR>. Los modificadores principales de esta sentencia son ALIGN=alineación y VALIG- 
N=alineación, que definen la alineación del contenido de la fila horizontal (CENTER, 
LEFT y RIGHT) y verticalmente (MIDDLE, TOP y BOTTOM) respectivamente. También 
podremos asignarles a las filas la mayor parte de los modificadores del tag <TABLE>. 
Por ejemplo, si deseamos que una fila tenga un color de fondo determinado, usare- 
mos el comando BGCOLOR=color, dentro del tag <TR> de la fila correspondiente. 

Un ejemplo de fila sería el siguiente: 


<tr align="center” valign="middle” bordercolor="*CCCCCC” bgcolor="*FFO000"></tr> 


Definir las celdas 

Por último, queda por establecer el formato de las celdas de la tabla. Esto lo ha- 
remos gracias a los tags <TD> y su cierre </TD>, y también con <TH> y </TH>, aun- 
que este último se utiliza para definir los encabezados de cada columna (por 
defecto, su texto se representará en negrita y centrado). 


o CIERRE AUTOMÁTICO 


Las directivas <TD> y <TH> son cerradas según el estándar de HTML, es decir, que un elemento 
de tabla <TD> debería cerrarse con un </TD>. Sin embargo, los navegadores asumen que un ele- 


mento de la tabla queda automáticamente cerrado cuando se abre el siguiente. 
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En cuanto a los modificadores, podremos aplicar la mayor parte de los que usa- 
mos con las sentencias <TABLE> y <TR>, aunque en este caso se adicionan algu- 
nos más. Por ejemplo, encontramos los comandos ROWSPAN=tamaño y COLSPAN- 
=tamaño que indican el número de filas (rows, en inglés) y columnas que ocu- 
pará la celda, respectivamente. 


Un ejemplo de celda encabezado sería: 


<th align="center” valign="middle” bordercolor="*000000” 
bgcolor="*FFFFO00">Titulo de encabezado</th> 


Un ejemplo de celda común sería: 


<td align="left” valign="middle” bgcolor="*990000">Contenido de la celda</td> 


Tablas en Dreamweaver 

Así como incluir cualquier elemento en Macromedia Dreamweaver se hace mu- 
cho más fácil que programarlo en código HTML, con las tablas sucede exacta- 
mente lo mismo. Esto significa que no tendremos que preocuparnos por orde- 
nar las filas ni las celdas, ni tampoco por cuál encabezado será correspondiente 
a cada columna o asignar modificadores para cada componente de la tabla. 


Mediante un simple cuadro de configuración y varias opciones complementa- 
rias, podremos desarrollar, de forma rápida y sencilla, excelentes y bien organi- 
zadas tablas para poder incluir en nuestras páginas. 

Ya sabemos que mediante el código HMTL podemos manejar filas y celdas, pe- 
ro las columnas no son detalladas de manera explícita en la escritura de este len- 
guaje. A pesar de esto, Macromedia Dreamweaver 8 puede manejar todas estas 
alternativas, es decir, tanto filas y celdas como también columnas. 


oi TABLAS EXPANDIDAS 


Mediante el modo de tablas expandidas podemos incluir temporalmente un determinado relleno y 
espaciado de celda a las tablas y aumentar sus bordes para hacer más sencilla su edición. Este mo- 
do nos da la posibilidad de seleccionar elementos de las tablas o colocar el punto de inserción de 
forma precisa. Para habilitar esto, debemos ir a Ver/Modo de tabla/Modo de tablas expandidas. 
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E Creación de tablas PASO A PASO 








E Recurra a la opción Tabla del menú Insertar. 


fl Establezca las propiedades de la tabla: cantidad de filas, cantidad de columnas, 
ancho, borde, espacios entre celdas, tipos de encabezados, texto alternativo, 
alineación, etc. Haga clic en Aceptar para insertar la tabla. 
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» 


El Modifique el aspecto visual de la tabla mediante las opciones que brinda el 
Inspector de propiedades. 
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Al seleccionar una tabla creada, Dreamweaver mostrará en la parte inferior una barra 
dinámica que expresa el ancho total de la tabla en píxeles y en porcentaje, así como 
también la división de cada columna. Esta barra también ofrece flechas individuales 
al lado de cada división de columna que al presionarlas nos muestran un menú para 
cada columna. Éste ofrece varias opciones, como agregar una nueva columna o selec- 
cionar la correspondiente al menú. Si no aparece el ancho para cada columna o para la 
tabla en general, es que este dato no fue especificado en la creación de la tabla. 

En cuanto al formato de las tablas, filas y celdas, la prioridad la tendrá este último 
elemento por sobre las filas, y ésta, a su vez, sobre la tabla general. Por ejemplo, si la 
tabla posee un color de fondo rojo, y una de sus filas posee un color de fondo azul, 
éste se verá por encima del rojo, anulando a este último en la fila correspondiente. 
Mediante Dreamweaver también contamos con la posibilidad de importar ta- 
blas creadas mediante otra aplicación, por ejemplo, Microsoft Excel. También 


ii ACCESO RÁPIDO 


Es importante tener en cuenta al usuario, especialmente en la carga de la página. Debemos saber 
que el rendimiento de Internet nunca es del 100% [sobre todo en los casos de dial-up), por lo que es 
recomendable evaluar con criterio los contenidos multimedia que incorporemos al sitio (imágenes, 


audio, video, etc.), ya que una carga lenta de las páginas terminará cansando al cliente. 
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podremos exportar los datos de una tabla de Dreamweaver a un archivo de tex- 
to. Para importar una tabla desde otro programa, debemos ir a Archivo/Importar/ 
Datos de tabla, para luego especificar el archivo que contiene los datos. Para ex- 
portar una tabla a un archivo, debemos recurrir a Archivo/Exportar/Tabla, deta- 
llando luego el nombre del archivo en el que deseamos almacenarla. 


Estilos en las tablas 
Para ahorrarnos trabajo en la modificación visual de las tablas, Dreamweaver cuenta 
con estilos predefinidos para poder aplicar a estos objetos. Veamos cómo aplicarlos. 





TM A PASO A PASO 


E Seleccione la tabla y vaya a Comandos/Formatear tabla.... 





A Seleccione un estilo visual. 
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nm LA BARRA DE ESTADO DE DREAMWEAVER 


Esta barra se ubica en la parte inferior de la ventana y nos da información acerca del docu- 
mento. Dentro de ella encontramos una función muy práctica: el selector de etiquetas, que 
nos servirá para ver el código de cada objeto y para situarnos en sus diferentes tags, selec- 
cionándolos de manera precisa desde aqui. 
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Si lo desea, puede modificar el aspecto del tema predeterminado. 
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Dividir y combinar celdas 
Si deseamos, por ejemplo, que alguna de las celdas se divida en varias más ocupando el 
mismo espacio que alguna de sus celdas contiguas (horizontal o verticalmente) o tal 
vez, por el contrario, que dos o más celdas se combinen para ocupar el espacio de una 
o más celdas contiguas, contamos con estas opciones en el Inspector de propiedades. 
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E Combinar celdas PASO A PASO 


o Seleccione las celdas que desea combinar y presione el botón correspondiente 
en el Inspector de propiedades. 
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[a Una vez realizado este procedimiento, automáticamente se combinarán las 
celdas conformando una sola 


A A MA A E a 
Acho Edda Wer Poeke Makke Tarlo Comandos Hu Ventana Óyuds 

Cocca ¥ 20d 0-4 N2GOQB-E 
| personal inde E == — 
Di aoe | eeto Tiu ¡Documento creido Ter p a U caña 
E daitan las srl ad cat abitan rsi aliia a 
Eiero 


, Felrero o Marea 


boda tables cd cido 


[k A A e srei ls 
boir 

E 
Pomaka iira ¿5 edo; pargues =|| ici 
Ponto Georg, Imeso de Te a lc e T 


=:] Gile mo pee anO ea Pal - 
D jE wei reee 





= Nj Ene, OO od MP accon | erde | 


También podemos insertar o eliminar filas y columnas de una tabla. Para añadir una 


sola fila o columna, debemos situarnos en una celda de la tabla e ir al menú Modi- 
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ficar/Tabla/Insertar fila o bien Modificar/Tabla/Insertar columna. En cambio, para 
agregar varias filas o columnas en un solo procedimiento, podemos recurrir a Modi- 
ficar/Tabla/Insertar filas o columnas. Se presentará un nuevo cuadro donde determi- 
naremos la cantidad de filas o columnas que deseamos adicionar. Para poder elimi- 
nar filas y columnas de la tabla correspondiente, debemos situarnos en cualquier 
celda de la fila o columna que deseemos descartar e ir a Modificar/Tabla/Eliminar fi- 
la o Modificar/Tabla/Eliminar fila. También podemos seleccionar todas las celdas de 
una fila con la selección múltiple y presionar la tecla Supr. 


E Dividir una celda PASO A PASO 





a] Seleccione la celda que desea dividir. 


2] Presione el botón que corresponde a la división de celdas en el Inspector de 
propiedades. Aparecerá un nuevo cuadro. 


A A A AAA 
Buhre Edkión Wer Poor Makke Torio Comandos So Weba Ayuda 


enin + 404 E504-4-HPS30D-P 


Formato) Miren 6 | plo ninguno <| æ ¡Ur EXT mos 


A AT lira E F 


w Aii Mo HH El Frj 


cr a TA 
mis] Pm [Evade ba ceba en Has e columnas] $ e 
A A 





nm GUARDAR COMO 


Si en algún momento se nos plantea el caso de querer almacenar una página en otra ubica- 
ción del sitio o de nuestro equipo [de manera local) o con otro nombre de archivo u exten- 
sión/formato, el menú Archivo de Dreamweaver ofrece otra opción para guardar. Es la deno- 
minada Guardar como (Archivo/Guardar como...). 
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» 


Establezca las propiedades de la división de la celda (en cantidad de filas o 
de columnas). Presione Aceptar. 


A LN 


terior Ml 
9) Codo paowa | Bree Tio: ¡Documento se tibudo 


T my k EE FL 
p Added kiila tasas alas ibi Ms daa 


É E 4 un oia 


MAN 


air allein ar [utdi] PEA RN oa + TNA la] 
e Prepiedades TA Ey 
Formato, espana = Eiio Maro *[ © č] f EXAR mo n -Qa a 
Fuerte | Gaona, Tires Me a| Tam dat pete dz ja Mal des 

Sj e ri o O TOO 


JE part prada. | A| tre E) ra MAI rccoooo | merda [| 


A AA 
tacho bdcón ve imela Police Taria Cimanis fiiy vanai Kyaka 
; J j 
Comi + aodrean--NoO0B-p 
percal te T 
[cs sij omar | ¿4 piero Veo: [cuenta sido Jae e de €. ca! s 
E rl j dii ii da iiasal a bii isis Mia is dana fur RE f isis tasa Pai rn Y o 
E [SSA 


Febrero -3 Marto j E D. Stio » Empire (12 bbos Empire! 


meis 


J44 HE 
cose ODO 
ai 
Hp 


EAA A AN 
a 
e Propiedades. 
Formato [herpes Is 
Fu O e hen ~ 
sE] Celda tiori [frman a pl = i = 
TIJE vut prede, =| A ie [C A A 





E Si lo desea, puede volver a dividir alguna de las celdas creadas o unir algu- 
nas de ellas para crear una nueva disposición. 
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HOJAS DE ESTILO 


Las hojas de estilo son la mejor manera de personalizar el aspecto visual de nues- 
tras páginas de forma sencilla, rápida y eficaz. Se trata de un método de codifica- 
ción complementaria al HTML, basada en este lenguaje, que permite crear estilos 
visuales para aplicar a las diversas etiquetas que puede contener una página. Es así 
que podremos crear estilos individuales para los párrafos, los textos, las tablas, etc. 
Mediante las hojas de estilo podremos controlar y personalizar márgenes, alineacio- 
nes, colores, formatos, fuente, espesores, altos, anchos e infinidad de opciones más, 
todo ello sin la necesidad de modificar individualmente cada elemento de la pági- 
na. Las sentencias para crear estilos son algo diferentes del código HM'TL en sí, pe- 
ro son, al igual que éste, muy sencillas de desarrollar y fácilmente aplicables. 

La característica más destacable del uso de los estilos es que podremos aplicarlos tan- 
to en el código de la página como en un documento externo relacionado con la pá- 
gina. Esto quiere decir que podremos crear un documento que incluya, por ejemplo, 
tres estilos, uno que deseamos aplicar a los párrafos, otro a los textos y otro a las ta- 
blas. Este documento lo almacenaremos individualmente con la extensión CSS (Cas- 
cade Style Sheets). Luego, en cada página en donde queramos aplicar estos estilos, in- 
cluiremos una simple vinculación dentro de su encabezado (en la etiqueta 
<HEAD>). La mayor ventaja de establecer un archivo CSS independiente, es que si lue- 
go de un tiempo deseamos modificar el estilo visual del sitio, con sólo modificar el 
CSS estaremos modificando todo el sitio, con un gran ahorro de tiempo de trabajo. 
Además, CSS permite definir muchos factores que no es posible establecer mediante 
el formato en código HM'TL, como tamaños o unidades de fuente más específicos. 


La sintaxis 

Es necesario explicar el desarrollo de la codificación CSS específica, aunque con 
los tags HTML que ya conocemos, estos ejemplos se entenderán perfectamente. 
Primero tomaremos como ejemplo los párrafos, cuya etiqueta sabemos que es <P>. 
Como primer paso, debemos definir el tag al que se aplicará el estilo. Lo hare- 
mos colocando el comando de la etiqueta, obviando los signos de mayor y me- 


mm VER CÓDIGO FUENTE 


Para poder ver el código fuente de cualquier página web, basta con utilizar el navegador. Por ejem- 
plo, en el caso de Internet Explorer, hay que ir a Ver/Código fuente. Se nos abrirá un Bloc de notas 
con todo el código de la página. Aunque podemos sentirnos horrorizados al ver tantas cosas que no 
entendemos, a lo largo del libro aprenderemos a identificar lo que significan esas líneas. 
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nor que lo encierran, es decir, debemos escribir simplemente la letra P. Luego 
del tag, dejaremos un espacio para comenzar a definir el estilo, el cual se ence- 
rrará dentro de llaves, o sea, entre los símbolos { y }. 

Dentro de la definición del estilo tendremos que agregar los diferentes modificado- 
res de la sentencia. Por ejemplo, si deseamos establecer un color rojo para los pá- 
rrafos, tendríamos que escribir color: red. Dentro de las llaves podremos incluir la 
cantidad de modificadores que necesitemos, siempre separándolos por el símbolo ; se- 
guido de un espacio. Por ejemplo, si deseamos (además de aplicarle el color rojo) es- 
tablecer un margen izquierdo de 20 puntos, tendríamos que adicionar el comando 
margin-left: 20. La sentencia definitiva quedaría como P (color: red; margin-left: 20). 
Si el estilo lo vamos a incluir directamente dentro de la página (y no en un docu- 
mento CSS vinculado a ella), debe estar contenido dentro del tag <STYLE> y su co- 
rrespondiente cierre </STYLE>, y siempre acompañado de su modificador, que in- 
dica que es lenguaje CSS (TYPE="TEXT/CSS”). Otra cosa que debemos tener en cla- 
ro es que estas sentencias se deben escribir siempre en el encabezado de la página 
(<HEAD>), y no en el cuerpo (<BODY>). Todos los estilos estarán contenidos dentro 
de una única etiqueta <STYLE>. Por ejemplo, si deseamos agregar un estilo para los 
párrafos y las tablas, la codificación sería la siguiente: 


<HEAD> 

<STYLE TYPE="TEXT/(SS”> 

P (color: red; margin-left: 20} 

TABLE (background: blue; font-face: arial) 
</ STYLE> 

</ HEAD> 


Igualmente, la manera más eficaz y más utilizada para la aplicación de estilos es 
mediante un archivo CSS externo. Podemos editar estos archivos al igual que lo 
hacíamos al comienzo de este libro con los HTML, es decir, a través de un sim- 
ple editor de textos. También será posible programar CSS en Macromedia 
Dreamweaver, procedimiento que analizaremos en breve. 


o COMBINACIÓN DE TEXTO E IMAGEN 


En los enlaces también podremos combinar texto e imagen, es decir, que ambos elementos 
hagan referencia a un mismo destino. Tomando en cuenta los ejemplos vistos, podríamos rea- 
lizar la combinación mediante el código <A HREF=http://www.google.com.ar> <IMG SRC=lo- 
go.jpg BORDER=0> Ir a Google </A>. 
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Dentro de un documento CSS no será necesario aclarar al navegador que se tra- 
ta de estilos, por lo tanto, la etiqueta <STYLE> se eliminará, y el ejemplo anterior 
quedaría de la siguiente manera: 


P (color: red; margin-left: 20} 
TABLE (background: blue; font-face: arial) 


Una vez que desarrollamos todos los estilos que vamos a usar, almacenaremos el ar- 
chivo con la extensión CSS. Nos conviene crear una carpeta para guardar todas 
nuestras hojas de estilo dentro del sitio con, por ejemplo, el nombre styles. 
Ahora, ¿cómo aplicamos estos estilos en una página web? Sencillo: dentro de la 
etiqueta <HEAD> de la página a la que deseamos aplicar los estilos, incluiremos 
una sentencia que vincule ambos documentos. Su sintaxis tendrá siempre un 
formato estándar similar al siguiente: 


<LINK REL="stylesheet” SRC="styles/jestilos.css” TYPE="text/css”> 


1. estilos - Bloc de notas 
Archivo Edición Formato Yer Ayuda 


BODY 4 
PADDING-RIGHT: Opx; 
PADDING-LEFT: Opx; 
SCROLLBAR-FACE-COLOR: #FFFFFF; 
PADDING-BOTTOM: Opx; 
MARGIN: 0px; 
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; 
SCROLLBAR-SHADOW-COLOR: #FFFFFF; 
SCROLLBAR-3DLIGHT-COLOR: #FF0û0Q0Û; 
SCROLLBAR-ARROW-COLOR: #FF0000; 
PADDING-TOP: 0px; 
SCROLLBAR-TRACK-COLOR: #FFFFFF; 
SCROLLBAR-DARKSHADOW-COLOR: #FF0000; 
cursor: default; 


} 

.small { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 1px; 
color: #FFFFFF; 


.cuerpo { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #333333; 


H, 

.pie { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 9px; 
color: RFFFFFF; 


«intro { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #000000; 
font-weight: bold; 


} 
a:link { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #0066CC; 
text-decoration: none; 





Figura 8. Podremos programar CSS mediante 
cualquier editor de textos, como el Bloc de notas. 


Las clases 
Hasta este momento pudimos definir un estilo para cada etiqueta determinada. 
Pero también existen las clases. Las clases son estilos únicos, y podemos estable- 
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cer la cantidad que queramos. No será necesario indicar un tag a cada clase, ya 
que será un estilo que podremos aplicar a cualquier etiqueta. 

Dentro de los estilos, las clases se definirán igual que éstos, solamente que en lugar de 
especificar el tag que se modificará, debemos detallar un nombre para la clase. El 
nombre de una clase siempre irá antecedido de un punto. Es así que, por ejemplo, 
una clase nombrada titulo1 que defina un estilo determinado (en este caso, fuente 
Verdana de tamaño 10 píxeles y color naranja) se escribirá de la siguiente manera: 


„titulol (font-family: Verdana; font-size: 10px; color: orange; } 


Recordemos que si lo definimos dentro del documento HTML mismo, tenemos 
que colocar también las clases dentro de la etiqueta <STYLE>. Bueno, ya sabemos la 
manera de definir clases en una hoja de estilo. Ahora debemos saber la forma de 
asignar el estilo de la clase a los tags que deseemos. Si definimos los estilos en una 
hoja CSS, recordemos que siempre debemos vincularla al documento HTML con 
la sentencia <LINK REL> dentro de la cabecera. Ahora bien, supongamos que desea- 
mos aplicar la clase titulo1 a un párrafo determinado. El procedimiento será sencillo: 
ubicamos la etiqueta de abertura del párrafo en el código HTML, que sería <P> y le 
adicionamos el modificador general CLASS="clase”, donde clase será el título de la cla- 
se de estilos definida en CSS. La sentencia quedaría como: 


<P CLASS="titulo1">contenido del párrafo</P> 


Dentro de las clases también podemos indicar excepciones a la regla del estilo. Las 
excepciones o modificaciones ligeras a una clase de estilo se detallan dentro de la 
misma clase, utilizando el signo tt. Si tomamos el ejemplo anterior, podremos defi- 
nir una excepción de color. Veamos una ejemplificación de ello: 


,titulol (font-family: Verdana; font-size: 10px; color: orange;) 
*subtitulol fcolor: blue;) 


Ahora, todos los párrafos a los que apliquemos el estilo titulo1 se verán con el 
texto de color naranja, pero si especificamos la excepción subtitulo1, el texto de 
este se verá de color azul. Es decir, se toman todos los parámetros excepto el que 
se reemplaza, que en este caso es color. 


<P CLASS="titulo1” I1D="subtitulo1”>contenido del párrafo</P> 


136 VERS 


Hojas de estilo 


CSS: propiedades de las etiquetas 

Para poder aplicar adecuadamente los estilos y redactar bien todos sus comandos 
en el lenguaje HTML, debemos conocerlos a fondo. 

Posteriormente veremos cómo manejar CSS en Dreamweaver, cosa que se pre- 
sentará mucho más sencilla que esto. Pero nunca estará de más saber qué es lo 


que estamos representando mediante el diseño. 





COMANDO MODIFICADOR HON VALOR 
margin-top, margin-right, margin-bottom, Distancia entre un bloque y los restantes 
margin-left, margin: top right bottom left elementos. Tamaño, porcentaje. 


padding-top, padding-right, padding-bottom, Distancia entre el borde y el contenido 


padding-left, padding: top right bottom left de un bloque. Tamaño, porcentaje. 
border-top-width, border-right-width, Ancho de los diferentes bordes Tamaño. 
border-bottom-width, border-left-width, de un bloque. 

border-width: top right bottom left 

border-style Estilo visual del borde del bloque. NONE, SOLID, 3D. 
border-color Color del borde. Color (en código hexadecimal 


o nombre en inglés). 
width, height Ancho y largo del bloque. Tamaño, porcentaje. 
float Alineación del contenido del bloque. NONE, LEFT, RIGHT. 


Tabla 1. Principales modificadores de las propiedades 
de los elementos de bloque, como <P> o <H1>. 


KORO FUNCIÓN VALOR 

font-family Tipo de letra. Familias tipográficas genéricas. 

font-size Tamaño de fuente. Tamaño. 

font-weight Espesor de la letra. NORMAL, BOLD, BOLDER, LIGHTER. 

font-style Estilo de la fuente. NORMAL, ITALIC, ITALIC SMALL-CAPS. OBLIQUE, OBLIQUE 


SMALL-CAPS, SMALL-CAPS. 


Tabla 2. Propiedades de las fuentes. 


COMANDO MODIFICADOR FUNCIÓN O 

line-height Interlineado. Tamaño o porcentaje. 

text-decoration Efectos del texto. NONE, UNDERLINE, OVERLINE, LINE-THROUGH, BLINK. 

vertical-align Alineación vertical. BASELINE, SUB, SUPER, TOP TEXT-TOP, MIDDLE, 
BOTTOM, TEXT-BOTTOM. 

text-transform Mayúsculas o minúsculas. CAPITALIZE, UPPERCASE, LOWERCASE, NONE. 

text-align Alineación horizontal. LEFT, RIGHT, CENTER, JUSTIFY. 

text-indent Tabulación de la primera línea. Tamaño o porcentaje. 


Tabla 3. Modificadores para aplicar a los textos los efectos 
que cualquier procesador de textos puede establecer. 
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COMANDO MODIFICADOR UNA VALOR 
color Color de texto. Color (en código hexadecimal o nombre en inglés). 
background Fondo. Color o archivo de imagen. 


Tabla 4. En el código CSS las direcciones o vínculos a archivos 
se expresan como background: URL(fondo.jpg);. 


COMANDO MODIFICADOR FUNCIÓN VALOR 

display Clasifica al elemento. INLINE, NONE, LIST, BLOCK. 

list-style Define el estilo de los elementos de las listas. DISC, CIRCLE, SQUARE, DECIMAL, LOWER-ROMAN, 
UPPER-ROMAN, LOWER-ALPHA, UPPER-ALPHA, NONE. 

white-space Estilo del espaciado. NORMAL, PRE. 


Tabla 5. Con estos comandos podemos clasificar si, por ejemplo, 
un elemento es interior (<I>), bloque (<P>) o de lista (<LI>). 


CSS en Dreamweaver 

Ahora que ya conocemos todo acerca de las hojas de estilo, podemos conocer su 
manejo dentro de nuestro programa de diseño web. Con Dreamweaver podre- 
mos desarrollar CSS rápida y fácilmente. 





NW Crear una hoja de estilo PASO A PASO 





m Cree un archivo nuevo en su sitio mediante el panel Archivos. 


El Nómbrelo con extensión CSS. 


AA A ES 
debes Licor Ye paete Moor ledo Compia Ha ea ruda 


i z 
Camu T $ 
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Ábralo y defina los estilos y clases visuales. Guarde los cambios. 


A A OR AE ASA 
herhires- Dáción Ver paete Hokie ledo Comunes  Rbo Ventana deuda 


amis e ugs a Eea 4 
r. pi ME NA e EL a 


A A EL menr- parti 
Eant-e550 1 Ipa 
soler: AEFEFIF 


Fon-femi ly: Arial, Helrercica,. omh-amrif 


: ás Eos lz 





g Mueva el archivo a la carpeta destinada a almacenar las hojas de estilo del si- 
tio (arrastre el archivo manteniendo el botón izquierdo del mouse presionado). 


A A a Ea 
detbées Dadiga Ve fuerte Moca leto Comedor: Bbo Ventana kyuda 
Cara ¥ ua 3 En a. o g ie 


ir o ad Pa de 
el E e ta T 
A E Ln E 


hin 





Una vez que tenemos las hojas de estilos creadas, Macromedia Dreamweaver 8 nos da 
la posibilidad de ver los estilos contenidos en ellas mientras trabajamos en la Vista Di- 
seño. De esta manera, podremos aplicarlos rápidamente. Esto nos brinda una forma 
de trabajo mucho más simple que la que vimos anteriormente, ya que no hace falta 
escribir ningún código, sino que hay que seleccionar el texto que queremos modificar 
y luego, seleccionar el estilo que le vamos a aplicar. Veamos cómo hacerlo. 
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E Vincular una hoja y aplicar estilos PASO A PASO 





m Abra el documento HTML al que desea aplicarle los estilos. 


2 Despliegue el panel Estilos CSS y seleccione la opción Adjuntar hoja de estilos. 


RS Macromedia Drrarmaravar ll A A A EN 
Ancho Edición Wer sor Modbios Tarlo Comares So Weba Aoii 


2404 50502-4-D050/b-9 


[Lia] cds | ajai | S ooto | Teni: (Domaro ii [OE 
o m i. z a Tj: SO A ke. H Liar irs da E 7 ao T 
E asiiddiibisidadi blh Libk i dd li di lili bird lil desd, ES dad 
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uiianós pueden vér su págná personal pará asegorar que tested es realmente lá persona qué quére ssnbár 6 su espacio de 
rabato Tark de la nformación qué de biscira pa fu pigia přip irri roòpirada aileeiiamenbe en Horelar de 
drebins en eliemador, en balas dè los piriipaatas de in espácio de trabajo etc 
241 Campos ueportaniniPara péradibr e ac boalersr le ilesmación en sa págea pericnál, pales [Ed Detalles] hacia la 
derecha de fu nombre de uiuon en el pie de piena de la carpeta prercipal (o 0 quies otra muta de carpeta) aparecerán 

| Eomalano con carpes para 


= Hombre y apebdor -- recomendamos tl made nimbe” suutales apodos =apelbidos> , unger La puesto atra ña 
apellido como nombre de tnuano Se pasde unr neremti 
* igerzación == trodoto el momber de la empresa, orgeritación, ionvernded eto a que pertenece (0 sd acróreco.d 
está conocido) ESCW commene la méormación introducida en estos Campos en — 
cnombee de ustano> (snombrr completos, =orgetación>] ¡E Espia arca, 
donde es apropiado: S) po relena el campo “Nombre completo”, la entrada 1 mulestra quí MW Ta O | e ú fe | A 
Ssombrer de usuinro? <A dretción de torrena pa 
Dirección de comes electrónico pretaria — por defecto. ESO mrsdiree la dirección que unlizd para EERTSE 
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[EA a o rra Ale 


F a A EZ 


EIL isis i ce 


AA 
(Erspresades de a pagra] 





En el nuevo cuadro, presione Examinar y seleccione la hoja CSS que contiene 
los estilos que desea aplicar. Haga clic en Aceptar. 


4 En la nueva ventana, seleccione la opción Vincular y presione el botón Aceptar. 


A ON 


Enel ESC, se puede proportroner nformación del sobre uno ceño en la pápiva de información percal y aliado 
mncules con mir bs rmación e la red mundial APA), per ejerepls una página web o un reridor de qu organización Ceras 
AJ ustanós pueden vér su páginá personal pará aséporar que tried es reslmente la persona que quuérs ndár 6 nu esparto dè 
trabaga Parte de la aldcormatión qué de secta ea su Pigia quertoaál será morada aulcendecionende en Vbredas de 
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E] Verá que en el panel CSS dispondrá de todos los estilos de la hoja. Si hace doble 
clic sobre alguno de ellos, se abrirá una ventana para modificar sus propiedades. 


A A A OEI A 
kehee Edda Wer Pob Mokke Tarlo Curas ds Went Asia 


Carnin = 0d D0oñn-4-H200|B- 


| mirii. hide * A AA ŘŮ- 
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isiin rada r liis E 1011100111008 allliniida dd dad A AA En N. AN Piiuuk Ll tisaaliisi e E 
TI ES EEC mE Fer: «le PESE VITA Pía armazem ui g shae S umne rz; la plpa a HE ATI at Pera al F: «ud anibee mi 
Aeon más uorración en la red evadad CAMA, por ejemplo usa piga web o u Jer de qu orgarración Liros Usario cuerpo 
puede ser 6 plggná personal pára negra que ustod es reamento lá persona que quere emlar ás espacio de trabajo Pano ¿pia 
de la réormáción que == muestra En m página pereonal sega emiszado automáhcarente en libretas de direcciones en el servidor, iim 
Fn litat és los parte ici dem erpació de robats tit ; ik 
(24 1 Canpos mportade Para introducir o orsusácar la formación en ql página personal, pulsa [Ed Detalles] haria La derecha 
tje Ha bombee de ustinto ta el gue de página de la carpeta pomopal (6 cualkier otava de carprtah aparecer un Llorens 
an campat pära 


= Nombre y aprikios = recomendamer e) modo €poribre> Tmiciaeg J apoda capelidos> , meque ha puerto antep su Me Ad hd 
apelido como cnn de eso. Se puede e atentod Aplicación 


+ Cegariratcón -- mirsduer el noenbre de la empresa, argacnacida, MEETerA dad ríe aque perneneze (s mu erinin eti fi 
conocido) HECW tonnene la forentiión múrodilcida en ertos Campos an 
<nembre de manos (Cnembre campletso, Csrganización o) 
dende es aprópcado.: Eno sella el campa "Hombre completo”, la entrada es rinssira ati 
nomirt de sino? E£doecoón de torres >> 
= Dirección de torneo electrágoco primera > por detecto, ESC uirodocs la dercción que uhleri pare pegisirarse, 
z UA «Ar Lara de STE mba zomait, aa cari le digita, Fa prau ma Las miroduce cam dermonmnra 
secundarias. Paro coda derección que alla de, tendrá oye pasar por un proceso parecido a la abeniic ación. 
Esperibca la dirección que ESC usé pará mandado correo (1 «rección de comio primis] 


A EA imi rrin apta | 
peenem a = 
JUL EZLN mi Jos Y 

liado pe 


JOOCOOGDO 


HEE .E-<=.E=ZS 


MO Paia: EUA ins 9d y Begur. 
li b Athans A FENSERI 4 





6 Para aplicar un estilo, seleccione el elemento correspondiente y, en el cuadro 
Estilo del Inspector de propiedades, elija un estilo. 


A A A ONE S 
kehee Edda Wer Poca Mois Taro Cumrardos ds Mentira Ús 


Coda = 24045024 30U/D-E 


i pen bie i z3 = = 
[Laef Cidia] [jc] Ana Tio: ¡De Dementi ur chido 


* Hambre y apelidos recomendamos el modo <nombrer Ceuciales f apodos capelidos*, aeque ha puesto antes su Us Ad tad 
me a A RI aeenbad Ch aplacar 
Cegariración — mirsduer el nocribre de la empresa, orgarciación, asevertidad ete aque peneneze (o meacránimo siertá JON 
conocido) BECW cosmerte la nforenteiós múrodutida en estos Campos se 

<nembre de upaa (enamine campletso, Corganización o) 
dende es aprópcado: Eno selena el campa "Hombre completo", la entrada += viniestra ati 
¿nermbre de sino? E£doecoón de torres >> 

= Dirección de torneo electrágoco primaria > por detecto, ESC trodocs la deección que uoleó para registrarse, 
zi aa res ELEME de E Ll le digiti, pa prerio qa Laa miroduce com durierrea 
secumaanas Para calama ch yes pasar por un proceso perecido a la atenhicación. 

Eiperilica lá doección aio i le correo dia dretes de torto pamasa] 


am] 
€ kA A e sirrini wiis | 
+ Propiedades ; ls E 


Formato) Miren se pido > tirao (CE |m 7 EXT mos dis El 


JOOCOOGD 


A O A 


hato! fuo miei e Di in w F Els a ml 


MW b Athans A FENSERI 





[Propiedades de la pagra ..] O Pechos: Uria eE fy Pegao. 


El panel CSS 
Analicemos ahora las características fundamentales del elemento que nos permitirá 
modificar y personalizar las hojas de estilo externas vinculadas: el panel Estilos CSS. 
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Se trata de uno de los paneles desplegables laterales de Dreamweaver 8, y nos per- 
mitirá agregar estilos y clases a hojas ya creadas o desarrollar nuevas hojas, así como 
muchas otras tareas relacionadas con los CSS. Conozcámoslo. 


El panel CSS GUÍA VISUAL 3 


¿o TAS 
Estilos 255 


ii 


© Selección entre edición de 
estilos o de capas. 
© Nombre de la hoja de esti- 
lo usada. 
© Estilos y clases. 
O Propiedades del estilo o 
clase seleccionado. 
O Vistas de las propiedades. 
O Adjuntar una hoja de estilo 
C] #FFFFFF al documento HTML actual. 
Arial, Helvetica, san... O Aar e til | 
T gregar un estilo o clase a 
Añadir propiedad la hoja CSS actual. 
O Editar el estilo o la clase 
seleccionados. 
O Borrar de la hoja el estilo o 


| 00 la clase seleccionados. 





Tareas básicas CSS en Dreamweaver 

Ahora conoceremos la manera de realizar las tareas más comunes para mane- 
jar los estilos y las clases dentro de nuestro documento CSS a través del panel 
Estilos CSS. Mediante estos procedimientos, podremos contar con accesos más 
rápidos a todos los estilos y desarrollar nuevos temas visuales basados en CSS pa- 
ra hacer nuestras páginas mucho más atractivas y personalizadas. 


Recordemos que como los estilos CSS no se basan en imágenes, mediante su uti- 
lización obtendremos un doble beneficio. Por un lado, personalizar los formatos 
que utilizamos en las páginas de forma rápida, sencilla y consistente. Por otro la- 
do, reduciremos muchísimo el tiempo que tardan en descargarse. 
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PASO A PASO 





Ml Agregar estilos y clases 


ES En el 


panel Estilos CSS presione el botón Nueva regla CSS. 


E ac tomoedia Dioarrecaroes E A ANA A i 
Sache Edcón we imetas Mahis Teria Cómancda iii Wertira Hyde 
Común > Aann +- 000D- p 


Tailera hii i 


[lejos |5 ¡Dre Diseño Thi: [curar mila qi] TF A, 3t ü e B. [a | 


n y ae n TF 


i Lii elec Ln Lia Lea ad tapas ul se ud sliir 
f TL e na prapat aT información BA] pahna ami mame ér ii la ati aten Ñ de CLAN Co rd 


nformación an la red rrundial $ por alermplo ura página eb o un aanidor de sy organización tros usuardos puadar ars página 
personal páre pabgurir qué 16d 64 eaii lá pársóná qué guari aatar A Si Abha de rabaj, Faih dà LM información qué 86 nuóstr 
ñ Au náginá portón! aerá mostrado Autora nibrde en Abres dé diméciornes en el aerádór en ls do los parido de un espacio 
de abaj ple | 
40 Campos mipinemieg Pata nbodutir o achaca la información eh 4u página perico, pulga [Ed. Dolo Me5] Macia 1 derecha de 41 
viniera de usutio en el ys de página de la cárpels principal (o coséguile olla de corpela), áitrecerá Un rnilarno con Larios pta 


= Moro y apio +» MOTO A mado Mar A ld a a pa A a o DAT TEO de A de pd E o y 
b Pam 


E al a da PTS APT AE O a A A TA AS da TA aE NATACIÓN 


> cda de pote cirios TOA — pot dalt, PÍO AIM Br pOr que UA para Pepita 


ura dirscloras $e zorras adciorgióa, y i camii pa dirección, y precios que lar rudos comme éreccors] meoercianas, Para cada Sorrción que las, Dor pee pur E 


DEF Li prena pracido 1 UCA 
Fhin M aaa pb ELD ng parE Elk DAREA jili A  TA PFTAIA 


dd Lc > Ar Elda | 


Formato Mergune S Eito as eera SOEI ERAN weri 
Baeta aca, bala, se] Ta [9 EE qm mor izja ma bes 


¡Pa > iia Piernartas dde ib ] 


E a 
abbr lis al 


haida Lux i x i iaa taa i asas lada, 

mài Bi WY, Ga puaga pipari ar infermiación dela entre wni mleni er a i inacción paracind y aaahh warcie Car ke 
nåwmaæción en la rad mundial AAAA; por alampio una pågina wab o un caridad y arunización Útros uenarós puedan ver sy página 
piriana pimi jiggar gui listod 04 rsiánido la pórsorna qué quiéró iria A bs pata dh trabajo Paró de la mianiit lón gia aa sa 
eñsu páginá personal será mostrado ito ameno ón abredas de direcciones ón 6l conidór, en listas de joa pamicara da un aptid 
de Fabajo ute 
241 Campos epa Par intodacir o actual la información en 9u página pernónal, pulga [Ed, Dolalies] hetia la derecha de du 

imise de tato en el poe de página de la tarvela piincival (o cusdoret ob vista de corpelal atsreceiá un fomulano ton cdnpos pea 


de AAA 
a 


Tipo de selector: (2) Clave (puede aplicar a cuskquiór etiqueta) 
D Eteni (ekdi de nur el aspecto de uns ctrueto especia) 
(O orancidas (E), selectorás contistusdos, e0c.) 
Freiin a T Enin Herbeai | tetona] 
Defne we (a) Enn — 
Osiki esta doturacio 


KAQ A A 


Formato Mera 0 Esto pat JA DEA a 
Fuerte! al, Hetiebica, € [Ni Fun E ¡5 cae] evo (E: 





Establezca los valores que desea aplicarle al estilo en cada una de sus cate- 
gorías. Para concluir, presione Aceptar. 
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» 


w a g) PA 
i m g (E | D- ur ta cos IN 
A 
mirii hn" | 


parlara] pi Diseno | Tiuke Gemeren mti tbulo Jp wọ = EL a 
5 EA AA IA nd 
1 Diii i Lii EE rm dideleh Aida ala Ek ct LERRA 


ñi entre wni mleno en Da anas de ndarmación persánad y aradi nei can má 
AI ainut ie rokai piiras amarae ninian yar Jean! DA ! 
àl Cira agur qué AAA TET] en me cas Ex] insisi 
jgid pernónal era A por 
it 
intro 


Ed j Todo ECT 
e A E r s Tis. a a > 


¿Ls aa a 


ci Wedana, Aia, Hihrika, tarsa pesos E 5 


Tamaño: | 12 T i ira: | normal 
Epi; a kma | hama 


Alb de Bgy: Mp Pin: miniin 


parun proceso parecido 1 Parara 
Espia E A 


y 
cora db iai 
Formato hare me Esto ral e[ os ]a y EJE mo 


Fumie | aih haketita i a| Tan F tele se A roo lala EN uE Det 


[Esvptedades de la página... ] | Errenta de hta., | 





A] Aplique el nuevo estilo o clase al elemento que corresponda mediante el me- 
nú Estilo del Inspector de propiedades. 


A A AAA NE | 
fade bácón Ye imss Hakes Jario Coma Blij vahaa Avla 
foO0doaa-4-Mb0|Bb- pS 


AA 





o 3 PS . ME E Piin ataa 


ae e] Título Ücra i ikd ir p HE H E. ih, i 


v Bual bi l aE Siipien MAA AAA E ali ssa fitase uati A ¿da E E, ual, Li ahii Tred 
a ss pueda proporcionar información 101 bra O A e a po 1] a Tra y-a ELA Car miks A 
dorma idn an la m mundial W, por ajaempig una pàgina wab o un tamidor gda ry pación Co IAS Pda var 34) página sal 
roñiál pra segur qué 1él6d 65 ikaka là pertoni jua guari aiT A Ed el bio, Pro dé Le información qué S mua Ferdo 
ñánnáginó porñóna! será mósbado Auloriddc amore ón Lera dé dimécionss eno laóridór en lis do oa pamiananiig Aè un gamičió ADO 
g PERN pie jm 
240 Campos rip Fa imbadotiro aru lds da información en su página perricnal, pala Ed. Dolae9] Pcia la dirotia dw tia mo 
Wira de itii en el ga da pipina da la tipala pihiipal in nijakie plia vigla da tirpalah attrecerá un loirnidano ton tamiri pèra Miili d ai 


coi E r 
Hans Merida, Arial, Hetr, 
Pert-asa Ligi 
lontrtyla mil 
Dot rad Parral 
Ferris 
Par ral 
meg 
La rito LỌ im 


|| Añade progrdas 


La + Mad Ela 


Candi nani... 


Ar Pp de rbd. 





Una vez creados los estilos, podremos modificar sus propiedades si no quedamos sa- 
tisfechos con su visualización en pantalla. Para eso, debemos acceder al cuadro de 
configuración Definición de regla. Dentro de éste vamos a poder encontrar diferen- 
tes categorías para personalizar nuestros estilos, como Tipo (para el estilo de la tipo- 
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grafía), Fondo (para configurar los fondos de elementos como tablas, celdas, capas, 
etc.), Bloque (podemos establecer los valores de texto de los bloques, como <P>), 
Borde (personalización de bordes de etiquetas como tablas, celdas, etc.), Lista (con- 
figuración de los estilos de las listas) o Posición (usada especialmente para las capas). 


E Modificar un estilo o clase PASO A PASO 





[a] Seleccione la opción Editar estilo... en el panel CSS. 


E ea aA RE ANN 
kahes Dadiga Ye paete Hoces lmi Comndos bo Feriene kruki 


tema + 6034 oaA-4: DO Db:a 


atras Hs Y 


sa hal a 
EEN Campan fo dermiz- iniret o achamizmH ia irern ción en ma phate pertonal, pulsa Ed. Debiles] hacia la desecha de 
mine di iiad an ipi da pigro e a dela por 1 dra de ip ed pära h Le Piedini tOn TESDDE EAE Gun 


diks ads di peas ls pan odos! y MEE A A kie 


Parate Negu se Ebo se | El RE al 
Pite yardra aL H pe im | if > linen e ER! FFRAE E iz i be 


[Doema] 





EJ Modifique los valores que desee. Puede ver la vista previa en los objetos que 
tengan aplicado este estilo presionando el botón Aplicar. 


A T 


Paria | Aral Hobbs, ra 


Tamale ig wi po - 


= ab inara s[e M i 


Puit peira i H w i it S IFE E iz H i 
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Capas (layers) 

Se llama capa o layer a determinada zona dinámica de una página web que puede en- 
cerrar cualquier contenido HTML. Sus propiedades de ubicación, visibilidad y orden 
dependerán de sí mismas y no del resto de la página. Se puede decir que las capas son 
páginas dentro de páginas, y sus atributos serán manejados por CSS. En contraste, el 
contenido de cada capa se establecerá dentro del cuerpo de la página que la contiene. 
Las capas en sí no forman parte de los comandos estándar para HTML, sino que 


constituyen al lenguaje CSS, y son la base del DHTML o HTML Dinámico. 


E Internet Explorer 


Archivo Edición Yer Favoritos Herramientas Ayuda 


E E D s ' Búsqueda Si Favoritos (A) multimedia La ” E X al E] 


Dirección €) Cu sitios|Empirellicencia.htrnl b > Ir 


ERa PER ER i EN FER CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 
AAEREN CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 
ATERS TERTERA TEETE] CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 
RE AE EE EE E] CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 
od Ep a REER aitad my CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 
PASA p IA Mia CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 
MT O WEA A APA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 
CAPA 1 CAPA1 CAPA1 CAPA APA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 
APA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

APA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

APA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

APA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

APA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

APA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

APA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

APA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

APA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

APA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

APA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

AAICAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

ESCAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 

CAPA 3 CAPA 3 CAPA 3 CAPA 3 CAPA 3 








Figura 9. Las capas son objetos dinámicos que podemos 
colocar en cualquier posición dentro de la página. 


Sintaxis 

La única manera de definir capas que funcionen bien en cualquier navegador es rea- 
lizarlo mediante dos procedimientos: la definición de un estilo para la capa que, a di- 
ferencia de los estilos o clases restantes, no conviene que esté en la hoja de estilos CSS 


oi ESTILOS EN LOS ENLACES 


Para personalizar los atributos de cada uno de los estados de un link, tenemos que crearlos y mo- 
dificarlos de a uno. Para eso, vamos a Nueva regla CSS en el panel CSS y, en Tipo de selector, selec- 
cionamos la opción Avanzadas. Elegimos el estado en Selector:. a:link es el estado normal, a:visited 
es el link ya visitado, a:hover para cuando pasa el mouse por arriba, y a:active es el vínculo activo. 
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externa general, sino que lo más recomendable es ubicarlo dentro del encabezado de 
la página bajo el comando <STYLE>. Luego de definir el estilo, para insertar la capa en 
la página, debemos utilizar el comando <DIV> y su correspondiente cierre </DIV>. 
Entonces, por ejemplo, para crear una capa en nuestra página, debemos primero in- 
cluir el estilo en su encabezado, es decir, dentro del tag <HEAD>. Los estilos de ca- 
pas estarán definidos al igual que las excepciones de clases, es decir, a partir del co- 
mando ID, por lo que serán precedidos por el símbolo tt. Veamos un ejemplo: 


<STYLE TYPE="text/css”> 
*Capal (position:absolute; width:200px; height:115px; top: 100px; left: 20px;) 
<| STYLE> 


En este caso, la capa tendrá una posición absoluta dentro de la página, un an- 
cho de 200 píxeles, un alto de 115 píxeles, y estará ubicada a 100 píxeles del 
margen superior y a 20 píxeles del margen izquierdo. 

Luego, para insertar la capa en el cuerpo de la página (dentro de <BODY>), lo hare- 
mos mediante el tag <DIV>, haciendo referencia al estilo con el modificador ID: 


<DIV 1D="Capal”>Contenido de la capa</DIV> 


Layers: propiedades del estilo 

Dentro del estilo ID para definir las capas, podemos encontrar una gran cantidad de 
comandos modificadores que establecerán las características de una capa. También 
podemos aplicar la mayoría de las propiedades de los bloques. Veamos las propie- 
dades específicas para la etiqueta <DIV>. 

Para fijar la posición de una capa respecto a la página, contamos con los comandos 
LEFT y TOP, y los especificaremos en píxeles. "También podemos indicar el tamaño de 
una capa mediante los comandos WIDTH (ancho) y HEIGHT (alto), indicados en píxeles. 
En el caso que incluyamos varias capas y alguna se superponga con otra, podremos 
establecer una prioridad de visibilidad, es decir, qué capa se verá por encima de la 


nm CAPAS RELATIVAS 


A diferencia de las tradicionales, existe un tipo de capa que no se colocará en una posición determi- 
nada de la página que la contiene, sino que dependerá de su posición en el código fuente. Se las lla- 
ma capas flotantes o relativas, y se definen cambiando el valor del comando POSITION:absolute por 
POSITION:relative dentro del estilo de la capa. Podemos crear capas dentro de capas sin problemas. 
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otra. Esto lo logramos mediante el comando Z-INDEX, en el cual siempre indicare- 
mos un valor positivo. La capa que tenga mayor valor Z-INDEX aparecerá sobre las 
capas con valor inferior. Nunca dos capas podrán tener el mismo valor de Z-INDEX. 
Otra propiedad importante es la visibilidad de las capas, determinada mediante el 
comando modificador VISIBILITY. Sus valores pueden fluctuar entre VISIBLE, HID- 
DEN (oculta) o INHERIT (hereda la visibilidad de la capa o página que la contiene). 


Las capas de Dreamweaver 

Con Macromedia Dreamweaver 8 podremos manejar capas muy sencillamente. 
Hasta ahora, este elemento es el más dinámico que hemos analizado ya que, por 
ejemplo, podremos hacer cosas como colocar capas delante de otras, mostrar al- 
gunas y ocultar otras, o colocar una imagen de fondo a una capa y crear otra arri- 
ba con fondo transparente para insertar otros elementos. 

Con Dreamweaver podremos realizar todas las tareas y revisar todas las alterna- 
tivas en cuanto al manejo de capas en muy pocos pasos. 

Para insertar una capa, simplemente debemos recurrir al comando ubicado en la 
secuencia de menús Insertar/Objetos de diseño/Capa. Cuando la capa esté creada, 
podremos editar su contenido haciendo un simple clic en su interior. Recorde- 
mos que las capas son como una página individual y podemos insertar cualquier 
tipo de elemento en ellas (imágenes, texto, etc.). 

Para mover la capa dentro del documento (es decir, establecer los valores TOP y LEFT 
del estilo según el código), bastará con hacer clic en uno de sus bordes y, manteniendo 
el botón del mouse presionado, arrastrarla hacia donde deseamos que se encuentre. 


A IS AAA A A a 
Juchreo bdcón Ye metes Hakes Jarig Comas iij varbas Avala 

Común * cala 4 TNA akici 
an ai bordo a W 
keria til” OO A | te at 
RARO CA tadas regla 
126 ; iiie AA | => £ 

| 


gacio | -aj Dividir | ¿EN Diseño Thuo: Dura sa bdo 
T 7 aa —-r; : 
ip PEEPI dii bibi 


ki a o E ñ 
- E L - i äi 
j ID de capa tr i4zco l dri Dodge | indi z (1 im. fondo L ae | hegre = 
i O piis | A Ll va diad l| Col Fonde [7] | 
Desh. = Bi Ec 
župi ini 





148 


Hojas de estilo 


Para modificar su tamaño contamos con cuatro puntos, ubicados uno en cada 
vértice, en los cuales presionaremos y arrastraremos manteniendo presionado el 
botón del mouse hasta alcanzar el tamaño buscado. En este caso estaríamos de- 
finiendo los valores WIDTH y HEIGHT del estilo de la capa. 


A AAA i 
Adeg Bibh ve Jaate Habis lerig Comais li vèti Avala 
Común = soda 4 PAD a 
Eki c 
| ariana m == DE E MA 
o ioma | Em Tino Ürn m ika iF pi B üi -E h; Padia lad rialas 


a a aat maai e 


i 


[totr a riii kG E eTa ñ 


+ 


| + Propiedades 
[Es] Ide capa Er 10800 | dp | de 7 1 im. fondo C Casel trans = 
Lid Sup: Tico AU 2750 A A A 
E 


Desb, w Baii i 





Sue: inf flia Pret 
Figura 11. El tamaño de las capas puede exceder los límites de la página, 
aunque no es recomendable, ya que su contenido no se verá por completo. 


Algunas otras propiedades de la página podremos indicarlas mediante el Inspector de 
propiedades, sencillamente seleccionado la capa. Esto lo logramos haciendo un clic 
sobre alguno de sus bordes laterales. Algunos de los factores que podremos modificar 
desde aquí son su color o imagen de fondo, su visibilidad o su Z-INDEX (índice Z). 


Propiedades de las capas 

Como ya dijimos anteriormente, mediante el Inspector de propiedades podremos 
modificar la mayoría de los aspectos básicos de las capas. Conozcamos un poco 
más en detalle estas funciones que tenemos disponibles. 


oi EL PANEL CAPAS 


Es una manera sencilla y rápida de manejar las capas de un documento. Aquí se mostrará una 
lista con todas las capas insertadas, ordenadas por su índice Z, de menor a mayor, de modo tal 
que si creamos ocho capas, la que tenga en su índice Z el valor 1 será la que se muestre más 
arriba en el panel, y las que tenga el valor 8 será la última. 
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El Inspector de propiedades para capas GUÍA VISUAL 4 


< 
O m 





O Establece el ID del estilo para la capa seleccionada. 

© Indica el modo de delimitación de la capa. 

O Establece la posición de la capa (Iz para el margen izquierdo, Sup para el 
margen superior). 

O Ancho y alto de la capa. 

O Indica el valor de apilamiento de la capa (Z-INDEX). 

O Permite aplicar una imagen de fondo a la capa. 

O Establece la visibilidad de la capa. 

O Permite establecer un color de fondo sólido para la capa. 


LOS MARCOS 


Un marco, también denominado frame, es una o más divisiones que podemos in- 
corporar en una página, que partirá el cuerpo de ésta en una determinada cantidad 
de sectores. La característica principal de los marcos es que podremos mostrar el 
contenido de una página diferente en cada sector de la página madre, sólo incluyen- 
do en cada marco el vínculo que corresponda a la página hija que deseemos visua- 
lizar en el marco. Cada marco posee sus propios bordes y barras de desplaza- 


ES BROWSER SIN MARCOS 


Si deseamos mostrar un contenido para los navegadores que no soportan marcos, podemos utilizar 
el tag <NOFRAMES> y su cierre </NOFRAMES>. Dentro de ellos podemos poner un mensaje como Lo 
sentimos, tu navegador no soporta el uso de marcos, o un enlace que redireccione a una versión de 
la página que no se base en marcos. La etiqueta <NOFRAMES> va dentro de <FRAMESET>. 
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miento, haciendo que cada uno pueda ser tomado como una página individual. 
En HTML, los marcos se definirán a través de dos tags: <FRAMESET> y <FRAME>. El 
primero, cerrado por su correspondiente tag de cierre (</FRAMESET>) cumple la úni- 
ca función de determinar el tamaño o porcentaje de cada marco dentro de la página 
madre, y contener los marcos y sus vínculos. <FRAME> definirá el orden de los marcos 
y establecerá la página que se mostrará en cada uno de ellos. Veamos un ejemplo. 


<FRAMESET COLS="30%, 70% > 

<FRAME NAME="principal” SRC="index. html ”> 
<FRAME NAME="barra” SRC="bar, html ”> 

</ FRAMESET> 


Expliquemos el ejemplo anterior. La etiqueta <FRAMESET> define que la página madre 
será dividida en dos marcos verticales (el comando COLS significa columnas). La prime- 
ra de ellas (se determina el orden siempre de izquierda a derecha en caso de los vertica- 
les, y de arriba abajo en los horizontales) ocupará el 30% de las dimensiones de la pá- 
gina, mientras que la siguiente ocupará el otro 70%. Luego, dentro de <FRAMESET> se 
indican los dos marcos. La primera línea se refiere al primer marco y la segunda, al otro. 
Entonces, el marco de 30% se denominará principal y mostrará la página index.html, 
mientras que el marco del 70% se llamará barra y mediante él podremos visualizar la 
página bar.html. Vale aclarar que en el caso que deseemos establecer marcos horizonta- 
les, en vez del comando COLS tendríamos que especificar la sentencia ROWS. En el caso 
que deseemos incluir una división de marcos dentro de otra, sólo deberemos anidar el 
comando <FRAMESET> incluyendo éste dentro del marco que deseamos subdividir. 


Modificadores 

Dentro de la clasificación de modificadores de cada tag, en <FRAMESET> sólo po- 
demos destacar el uso de FRAMEBORDER=0, que deshabilitará los bordes de los 
marcos. En el caso de <FRAME>, contamos con NAME, que indica un nombre al 
marco, SRC, que establece el nombre del documento HTML que se mostrará, 


mm NAVEGACIÓN INTUITIVA 


Se conoce como navegación intuitiva al proceso de búsqueda directa de datos en pantalla. Hace un 
tiempo, esto significaba escribir las direcciones [URLs] de Internet directamente en el navegador, 
pero hoy en día se refiere también a la facilidad para buscar y encontrar la información deseada en 


la página inicial de un sitio [cantidad de clics, repetición de términos de búsqueda, etc.). 
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SCROLLING (YES o NO), que habilita o deshabilita las barras de desplazamiento del 
marco en cuestión y NORESIZE, que bloquea la redimensión del marco. 
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BIENVENIDOS AL SITIO! 


[17-49 | Lo que màs les gusta a los bloggers es escribir sobre ellos mismos 


JA eno eco indica ana encuesta realizada en EE-UU,, que coñala que las tomáticas prodominantes en lor blogs von las vidas y lar experiencias de 
mas autores. Solo 135% considera que lo que hacen ex perodinmo. 


17-05 | Alumnos portelos y bonaerentes arrancan cu vacaciones de imierno 


¡Comienza el receso invernal y aunque se espera un importante inovimiento turistico, muchos padres deben continuar con su trabajo. Por eso, ambas 
hurisdicciones preparan colonias de invierna, combdores escolares y actrridades recreativas. 





Figura 12. Aquí se muestra una página con dos marcos horizontales. 
El cambio en el puntero del mouse indica que se pueden redimensionar los marcos. 


Enlaces a marcos 

Los enlaces podrían ser un problema para la utilización de marcos ya que, al hacer clic 
en un link, éste se mostrará en una ventana nueva o en la misma, pero no respetará el 
uso de frames. Para eso existe el comando TARGET. Este campo lo hemos menciona- 
do en varias oportunidades, y su función es identificar el destino de visualización del 
vínculo. Si hacemos memoria, podremos recordar que algunas alternativas para la op- 
ción TARGET eran _blank (ventana nueva) o _self (misma ventana). Bien, con el uso 
de frames el comando TARGET será de vital importancia, ya que mediante él podremos 
indicar al navegador en qué marco mostrar la página nueva del enlace. Sólo tenemos 
que indicar el nombre del frame. Supongamos que incluimos en algún sector de nues- 


mm MARCOS O TABLAS 


A pesar de que los marcos solían utilizarse mucho, esto fue cambiando a lo largo del tiempo. Este 
cambio no se debe a la falta de compatibilidad de los navegadores, ya que las últimas versiones de 
estos no tienen problemas con el soporte para frames. Sin embargo, el uso de tablas se extendió 
muchísimo más, hasta ser uno de los recursos más utilizados para crear divisiones en una página. 
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tra página un enlace y queremos que éste se muestre en el marco de la izquierda, en- 
tonces tendremos que aplicar al tag <A> del link el comando TARGET="principal”. 


Insertar marcos en Dreamweaver 

En Dreamweaver será muy sencillo crear conjuntos de marcos, como también realizar 
sus anidaciones. Veamos el proceso por el cual podremos crear conjuntos de marcos 
predefinidos y luego modificarlos mediante el menú Insertar/HTML/Marcos. 


E Conjunto de marcos PASO A PASO 





ul Diríjase a Archivo/Nuevo.... 


[A] En la categoría Conjuntos de marcos, seleccione el que desee (puede elegir- 
los mediante la Vista previa). 


E a L 


ei] 


Comureo de pater dhiii 
Bia coni u arto Ae 


homai ata 
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MHTML T D de tarri 





nm ORIGEN DEL CONTENIDO 


Si incluimos el contenido de otra pagina en uno de nuestros marcos, podemos confundir al usuario 
si no informamos sobre la fuente real de la información. Esto sucede especialmente si el diseño de 
la página que incorporamos es demasiado simple o es similar al de nuestro sitio. Es importante 
mencionar la fuente original para respetar tanto al creador de ese contenido como a los usuarios. 
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» 


Configure las preferencias de la página de marcos base. TopFrame es el supe- 
rior y MainFrame el inferior en este caso. 
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4 Edite los marcos y luego guárdelos uno a uno, como también la página ma- 
dre (el conjunto de marcos). 
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ontinitar con sn trabajo. Por WD ibas puridicciones preparan colomas de invierno, comedores escolares y 
jactividades recreativas. 
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Es importante aclarar que una vez agregados los marcos, podemos trabajar en 
Dreamweaver y modificarlos fácilmente. Desde el Inspector de propiedades, po- 
demos modificar la presencia de bordes, su grosor y color, las líneas divisorias en- 
tre marcos, etc. Podemos guardar todo nuestro trabajo desde Archivo/Guardar to- 
do. El programa nos preguntara primero por el nombre del conjunto de marcos 
y luego por las páginas contenidas en cada marco. 

En Modificar/Conjunto de marcos tenemos varias opciones para dividir los mar- 
cos en más partes, tanto vertical como horizontalmente. 


E RESUMEN 


El diseño de páginas nunca será sencillo, pero a través de las páginas leídas hemos hecho 
un intenso recorrido por las características avanzadas del lenguaje HTML y sus implemen- 
taciones en Dreamweaver 8, lo que seguramente nos facilitará y automatizará bastante los 
procesos. Ahora que ya conocemos la totalidad de los elementos que componen una pági- 
na web y la forma de diseñar estos documentos, ya estamos listos para conocer cómo pu- 
blicar nuestros sitios una vez armados. 
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1 ¿Qué es una imagen de sustitución? 


N 


Explique cómo crear una barra de navega- 


cOn: 


3 ¿Qué utilidad posee un álbum de fotos 


web? 


4 Explique la creación de listas mediante có- 
digo HTML. 


¿Cuántos estados posee un enlace? 


6 Nombre y defina tres propiedades que mo- 


difiquen a las tablas, las filas y las celdas. 


7 Explique el proceso para combinar celdas. 


8 ¿Qué es una hoja de estilo? 


9 ¿En qué sector de la página se definen los 


estilos y las clases? 


10 Nombre y explique tres propiedades que 


modifiquen a una capa. 
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Y ACTIVIDADES 


EJERCICIOS PRÁCTICOS 


Y Cree en Dreamweaver una imagen de sus- 


titución. 


Y Busque en Internet diferentes estilos de 
albumes web y compárelos en sus funcio- 
nes con el desarrollado con Dreamweaver 


y Fireworks. 


Y Cree en Dreamweaver una nueva página y 


diseñe una lista ordenada de diez elementos. 


Y Practique en Dreamweaver la creación de 
tablas y aplíqueles diferentes estilos vi- 


suales. 


Y Practique la creación de capas en Dream- 


weaver. 
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Publicación 
de sitios 


A través de este capítulo comenzaremos 





a definir las propiedades que debe tener 
un servidor web y las diferentes maneras 
de implementarlo e instalarlo. 

Podremos crear uno propio a través 

de diferentes programas o contratar 
servidores externos con varias opciones 
de servicio pago para alojar nuestros 
sitios. Sea cual sea el modo, el objetivo 
primario sera el mismo: poder ingresar 


nuestros sitios al ámbito de Internet. 
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CONCEPTOS TEÓRICOS PREVIOS 


Antes de comenzar a implementar una publicación, ya sea en un servidor propio 
o en un servicio externo, tendremos que conocer algunos fundamentos teóricos 
acerca de los métodos de comunicación y resolución de dominios. Repasemos los 
conceptos generales del protocolo más fiable, el TCP/IP, y las características del 
sistema de resolución de nombres y asignación de dominios, el DNS. A partir de 
estos conceptos podremos desenvolvernos mucho más cómoda y fácilmente den- 
tro del ámbito de los programas y procesos que corresponden a la creación o 
contratación de un servidor web para nuestros sitios. 


El protocolo TCP/IP 


Como ya sabemos, para las comunicaciones entre computadoras por red (lo que 
incluye a Internet), es necesario que los dispositivos utilicen protocolos de co- 
municación para los diferentes procesos. Uno de estos protocolos es el denomi- 
nado TCP/IP (Transmisión Control Protocol/Internet Protocol), que se encarga de 
establecer trasmisiones confiables entre los equipos que integran la red, para 
intercambiar los paquetes de datos. La gran ventaja que ofrece TCP/IP es que 
permite enlazar equipos que utilizan diversos sistemas operativos. 


Este protocolo fue desarrollado y probado por primera vez por el Departamen- 
to de Defensa de EEUU, que lo utilizó en ARPANet, la gran red de comunica- 
ciones de este sector del gobierno norteamericano. Por esos años, TCP/IP esta- 
ba conformado por varios protocolos, que hoy en día se han extendido a más de 
cien. Este conjunto de protocolos que conforman el TCP/IP está basado en una 
arquitectura de capas que permiten a los desarrolladores organizar las tareas en 
diferentes módulos y servicios. Además de estos dos ítems fundamentales, el di- 
seño en capas puede determinar otros puntos también importantes, como la in- 
teracción entre los módulos o la manera en que se ejecutan éstos y los servicios. 
Para que la información que desea transportar el protocolo TCP/IP fluya correc- 
tamente a través de las capas, éstas atraviesan un proceso de encapsulamiento, 


o COMUNICACIÓN UNIVERSAL 


A través del modo operador del protocolo TCP/IP, cualquier par de equipos conectados a una 
red TCP/IP puede establecer comunicación entre sí, ya que cada uno de ellos posee una di- 
rección específica asignada (dirección IP), y cada datagrama [paquetes de datos) tiene en su 
cabecera la identificación de su emisor y su destino. 
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en el que los datos recibidos por TCP serán identificados con un encabezado de 
segmento TCP y luego, en la capa IP con otro encabezado correspondiente a IP. 
Con esta información se crea el datagrama IP. Éste se encapsulará y será divi- 
dido en paquetes, que pasarán a la capa final. 


Los servicios en TCP/IP 

Existen bastantes factores por los cuales elegir TCP/IP para nuestras comunica- 
ciones; dentro de ellos, conviene analizar los que se destacan por algunas carac- 
terísticas respecto a sus servicios. 


e No importa la tecnología de red que se utilice: esto se debe a su sistema de 
conmutación de paquetes, por lo que no es importante la marca de hardware 
que se use. TCP/IP define la unidad de envío de datos, denominada datagra- 
ma y se encarga de trasmitirlos en una red determinada. 

e Avisos de recibo punto a punto: el protocolo TCP/IP brinda un servicio de 
acuse de recibo entre el equipo emisor y el receptor. 

e Aplicaciones estándar: el protocolo TCP/IP ofrece estándares para muchas de 
las aplicaciones más utilizadas, como el correo electrónico, la transferencia de 
archivos o el servicio web. 


Las capas 

El protocolo TCP/IP se compone en un modelo constituido por cuatro capas, 
y a cada una de ellas se le asigna la resolución de un problema. El objetivo de es- 
te diseño de estratificación reside en asegurar que los datos recibidos sean exac- 
tamente iguales a los enviados. Para entender la funcionalidad de las capas, pen- 
semos en una pila de objetos, donde el primero, el de nivel superior, se comuni- 
ca con el que le sigue, y así sucesivamente. Esto en la teoría se aplica perfecta- 
mente: cuando deseamos enviar datos desde una aplicación en un equipo hacia 
otra aplicación en otro equipo, se dará la transferencia del mismo por cada capa 
hacia abajo en la máquina emisora, se transmitirán los datos por la red, y la má- 
quina receptora los aceptará y los irá transmitiendo capa por capa hacia arriba. 


oi NOMBRES DE DOMINIO 


Los nombres de dominio son exclusivos e inequívocos, lo que implica que no existen dos nombres 
iguales. Los nombres de dominio poseen una estructura jerárquica y son leídos de izquierda a de- 
recha, es decir, red (www), nombre (nombre del dominio), nivel (por ejemplo, .com) y denominación 
geográfica [por ejemplo, .mx], precedido siempre del protocolo utilizado para el acceso [http o ftp). 


USERS 159 


CREACIÓN DE SITIOS WEB 


Pero en la práctica, este proceso no será tan sencillo. Como mencionamos, cada capa 
se ocupará de resolver algún factor, es por eso que cada capa tomará una decisión 
de qué acción ejecutar respecto a los datos, dependiendo de qué tipo de información 
se trate y de su dirección de destino. Por ejemplo, alguna de las capas del equipo re- 
ceptor deberá determinar cuándo recibir el mensaje y si es necesario trasmitirlo a otra 
dirección, y otra capa establecerá con qué programa serán interpretados los datos. 


Para entender mejor los procesos y qué resolución puede tomar cada capa, pase- 
mos a explicar la función de cada una de ellas. 


e Capa de aplicación: es la capa de nivel más alto, donde el usuario deberá ingre- 
sar en una aplicación para acceder a los servicios de la red TCP/IP. Ésta va a co- 
municarse con la siguiente capa (capa de transporte) para establecer el envío y la 
recepción de los datos. Esta capa deberá elegir un método de transporte adecua- 
do, para luego pasarlos a la capa de transporte. 

e Capa de transporte: segundo nivel. Su tarea será establecer una comunicación di- 
recta entre el programa de aplicación emisor y el programa de aplicación receptor, 
lo que comúnmente se conoce como comunicación punto a punto. Esta capa 
también controla los flujos de datos manejados y organiza la información en pa- 
quetes (pasando cada uno a la siguiente capa). Además, se encarga de proporcio- 
nar una comunicación en secuencia y segura. Para ello envía avisos de recibo al re- 
ceptor y retransmite los paquetes perdidos. 

e Capa de Internet: es la capa de tercer nivel y maneja la comunicación entre am- 
bos equipos a través del protocolo IP. En la máquina emisora, identifica al progra- 
ma de aplicación y la dirección de destino. En esta última, realizará el proceso in- 
verso. La capa de Internet también verifica los datagramas y rutea sus datos para 
decidir de qué manera interpretarlos o, por el contrario, transmitirlos. No realiza 
verificación alguna sobre los datos recibidos y enviados de la siguiente capa. 

e Capa de acceso o red: como último nivel, se encarga de transmitir los datos 
al dispositivo de red para que éste los envíe, a través de una red, físicamente 
hacia el receptor. Normalmente, este proceso se realiza mediante el controla- 
dor del dispositivo en el módulo. 


oi TIME LIFE 


Éste es un dato codificado dentro de cada datagrama o paquete de datos. Se trata de un conta- 
dor que define el tiempo de vida del paquete, es decir, cuánto tiempo máximo puede esperar un 
paquete para ser recibido. Pasado ese límite de tiempo, el paquete se elimina. La unidad con que 
se mide el tiempo son los segundos, con un máximo de 255 segundos. 
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Emisor Receptor 


Capa de Software Capa de 
aplicación aplicación 
Capa de Capa de 
transporte transporte 
Capa de Capa de 
Internet Internet 


Capa de Hardware Capa de 
acceso acceso 


Banda ancha, dial-up, fibra óptica 





Figura 1. Mediante este diagrama se explica de forma 
resumida la transmisión de datos mediante el protocolo TCP/IP 


El paquete de protocolos 

Como ya sabemos, el protocolo general TCP/IP apoya sus bases en una cons- 
trucción de varios protocolos diferentes. Podríamos decir que es una suite de 
protocolos. Cada uno de ellos se aplica a las diferentes capas de TCP/IP, y entre 
ellos se destacan los siguientes: 


e TCP (Transmisión Control Protocol): provee el servicio de entrega de paquetes 
punto a punto, permitiendo a un puerto local brindar servicio a varios puertos 
receptores remotos. También cumple la función de controlar el flujo de los da- 
tos, es decir, comprobar que la información no se envíe más rápido de lo que 
el receptor puede manejar. 

e UDP (User Datagram Protocol): permite el acceso a los puertos, sin la necesi- 
dad de una conexión existente y segura. 

e IP (Internet Protocol): no necesita comprobar comunicación entre el emisor y 
el receptor de los datos para su entrega, asumiendo que el receptor existe. En 
este proceso, cada paquete es transmitido individualmente y sin un orden es- 
tablecido. También ejecuta un servicio de direccionamiento que identifica si la 
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dirección de destino pertenece a la red local o a otra. Además, el protocolo IP 
es responsable del enrutamiento de los datos, es decir, la dirección del camino 
que hay que tomar para la transmisión. 


Administración de TCP/IP 


Por ser uno de los métodos más frecuentes a la hora de transmitir datos por red, hay 
algunos factores que TCP/IP tiene en cuenta para que la red esté activa y funcionado 
adecuadamente, por ejemplo, la identificación de otros equipos ante el sistema, la con- 
figuración de sus guiones de arranque o la obtención de una dirección de Internet. 
No será demasiado complejo manejar los diferentes servicios y opciones que puede 
contener en su operatoria el protocolo TCP/IP. En nuestro caso, asumimos que nues- 
tro equipo tiene instalado como sistema operativo Windows XP, por lo que contare- 
mos con la línea de comandos básica (antes MS-DOS). Para poder administrar las 
opciones de nuestro protocolo de red e Internet, contamos con una serie de coman- 
dos ejecutables. Para poder introducirlos debemos, justamente, ejecutar la línea de 
comandos de Windows, denominada allí Símbolo de sistema. Podemos acceder a él 
dirigiéndonos a Inicio/Todos los programas/Accesorios/Símbolo del sistema. 

Se abrirá una nueva ventana que nos ubicará en el directorio de nuestro usuario. La 
línea de comandos de Windows se basa en un cursor para escribir los comandos y 
en una estructura de directorios a través de paths o rutas de acceso. Ahora analizare- 
mos los comandos más frecuentes para el control y la modificación de TCP/IP. 


COMANDO FUNCIÓN 


IPCONFIG Configura el software TCP/IP y la dirección IP del equipo local. 

FIP Accede al servicio de transmisión de archivos por FTP mediante el símbolo del sistema. 
TELNET Establece conexiones a servidores. 

FINGER Obtiene los datos de un usuario conectado. 

PING Comprueba la existencia de equipos remotos a través del envío de paquetes. 

NET Permite configurar todo un entorno de red. 

NETSTAT Muestra las conexiones TCP/IP activas. 


Tabla 1. Comandos más comunes para el manejo 
del protocolo TCP/IP en el Símbolo de sistema de Windows. 


oi ACCEDER EXTERNAMENTE POR NO-IP 


Si bien para probar el funcionamiento de un sitio conviene hacerlo de manera local, en el caso que 
el servicio de No-IP ya esté activo en nuestro sistema, podremos acceder desde fuera, es decir, des- 
de el ámbito de Internet. Para eso, sólo colocamos en el navegador la dirección de nuestro alias No- 


IP. Si la redirección está bien configurada, veremos lo mismo que mediante el acceso local. 
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SES CIA ARA T 


icrosoft Windows XP [Versión 5.1.26480] 
<C> Copyright 1285-2001 Microsoft Corp. 


DNA SAIA S 


aciendo ping a uvww.1l.google.com [216.239.37.991 con 32 bytes de datos: 


Respuesta desde 216.239.37.99: hbytes=32 tiempo=155ms TTL=245 
Respuesta desde 216.239.37.99: bytes=32 tiempo=1648ms TTL=244 
Respuesta desde 216.239.37.99: bytes=32 tiempo=153ms TTL=244 





Figura 2. La mayoría de los comandos podremos 
aplicarlos tanto a redes locales como a Internet. 


Resolución de nombres de dominio 

Se denomina DNS (Domain Name System) al método por el cual a las direcciones 
IP estáticas se les asigna un nombre de dominio. Se basa en una gran base de datos 
con una distribución jerárquica que almacena toda la información que esté vincu- 
lada a nombres de dominio pertenecientes a la gran red de redes: Internet. Es decir 
que, por ejemplo, para poder tener un dominio .com, tendremos que registrar el 
nombre en la empresa correspondiente e indicarle el número de IP del servidor que 
contiene la página, para que estos dos datos sean asociados. 

El DNS se pensó básicamente para una mejor y más rápida memorización de las 
direcciones de Internet, ya que memorizar un número IP para indicarle a nuestro 
navegador es demasiado complicado. Para ello, se ideó un sistema de resolución de 
nombres mucho más fiable, denominado finalmente Domain Name System. 

Se incluye también dentro de la fusión de protocolos que componen al TCP/IP. Su 
principal función es dar acceso a diferentes servicios de red (normalmente usado pa- 
ra la World Wide Web) a las diversas aplicaciones mediante el uso de un nombre de 
dominio. Para eso es necesario un mecanismo que resuelva y asocie estos nombres 
con la dirección IP, por lo que surge un método de base de datos que registran di- 
chas asociaciones y la correcta resolución de la IP correspondiente al nombre. 


nm EJECUTAR COMANDOS EN EL SÍMBOLO DEL SISTEMA 


Para poder ejecutar los comandos detallados, debemos escribirlos y luego presionar la tecla ENTER. 
Además, para obtener la ayuda y variantes modificadoras del comando, debemos escribirlo, dejar un 


espacio y escribir un signo de pregunta para luego presionar ENTER (C:1>IPCONFIG ?). 


USERS 163 


CREACIÓN DE SITIOS WEB 


Cada nombre se crea a partir de un dominio raíz (servidor web), y desde cada do- 
minio también podremos crear subdivisiones (subdominios), por lo que dentro de 
un mismo servidor web podremos alojar diferentes sitios que se accedan mediante 
diferentes dominios y subdominios. El nombre de un dominio puede tener hasta 
63 caracteres de longitud, y no diferencian entre mayúsculas o minúsculas. 

Como ya dijimos anteriormente, los nombres de dominio están clasificados en ni- 
veles y geografía. En el primer caso podemos destacar el tipo de organización que 
publicó el sitio asociado con ese nombre, por ejemplo, .com para comercios, .gov 
para organizaciones gubernamentales, .mil para entidades militares, .edu para esta- 
blecimientos educativos o .org para organizaciones sin fines de lucro. Con respec- 
to a la clasificación geográfica, ésta se basa simplemente en el país del servidor que 
la publica, como .mx para México, .ar para la Argentina o .es para España. 

Estos sufijos se ubicarán luego del nombre de dominio. Por ejemplo, supongamos que 
registramos y asignamos el nombre de dominio fabricas_madero, y que ésta es una or- 
ganización comercial que posee los servidores en Brasil. El dominio completo queda- 
ría: fabricas_madero.com.br (generalmente hay que antecederlo del sufijo www). 


La base de datos 

Cada servidor DNS mantiene una base de datos dedicada a asociar los nombres de 
dominio con las direcciones IP correspondientes. A estos datos se los conoce como 
archivos de la zona. Cada servidor de nombres también incluye una base de datos 
de archivos de resolución inversa de la zona. El formato básico de ambas bases de 
datos se aplica a archivos de texto con los diferentes registros de asociaciones, de- 
pendientes del Resource Records (registro de recursos) de DNS. 


3. Respuesta 


4, Demanda 
Servidor DNS de Servidor DNS 
de designación | 2- Resolución _| para demandas 


1. Demanda 6. Resultado 


Figura 3. Una demanda recurrente pone una mayor 





parte de la carga en el servidor de nombres. 


Nuestro propio servidor web 


Método de resolución 

La resolución de nombres de dominio es el método por el cual los DNS pueden 
buscar datos a lo largo del espacio de dominios, aunque no tengan autoridad sobre 
ellos. Este proceso siempre empieza desde los dominios de raíz primarios hasta lle- 
gar al nivel secundario que contiene la información de la zona que hay que resolver. 
La resolución puede ser de dos tipos: recursiva o iterativa. 

En el primer caso, el DNS almacenará los nombres y las direcciones IP asociadas 
con cada uno dentro de una memoria caché, mientras que obtiene la respuesta del 
proceso de resolución de nombres de dominios. Esto tendrá el objetivo de acelerar 
la búsqueda si algún dato es requerido por segunda vez. En una resolución iterativa, 
el DNS dará la respuesta más óptima basada en datos de la zona. 


NUESTRO PROPIO SERVIDOR WEB 


Ahora que ya conocemos la teoría, es hora de poner en práctica la implementación 
de un servidor web propio, para así poder publicar nuestro sitio en Internet y que 
todos puedan acceder a él. Repasaremos todos los procesos necesarios para que, 
cuando un usuario externo coloque en su navegador la URL que elegimos para 
nuestro dominio, pueda acceder al sitio ubicado en nuestro equipo localmente. Pa- 
ra ello, primero necesitaremos configurar el servidor web en nuestra computadora, 
luego aplicarle un alias estático, posteriormente registrar el dominio y, como proce- 
so final, aplicar una redirección hacia el alias denominado. 

Lo destacable y positivo de realizar todos estos procesos es que podremos hacer- 
los de manera gratuita, ahorrándonos muchos gastos que tendríamos que hacer 
si contratáramos un servicio de hospedaje externo. 


Internet Information Server 
Poder contar con un servidor propio de sitios y páginas de Internet no es demasiado 
complejo, sobre todo si contamos con Windows XP, ya que este sistema operativo 


m PERSONA Y ENTIDAD 


Si queremos registrar una persona civil responsable sin antes establecer una entidad, no podremos 
hacerlo, ya que debemos contar con ambos datos para registrar un dominio, por lo que es aconse- 
jable registrar la entidad registradora y luego, la persona responsable. Para registrar una persona, 
se requiere determinar a qué entidad pertenece, o no se puede continuar con el registro. 
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nos ofrece una aplicación extremadamente versátil y funcional para cumplir este ob- 
jetivo: Microsoft IIS (Internet Information Server). Mediante esta práctica y sencilla 
herramienta de Windows, podremos montar nuestro propio servidor de páginas 
web, que podremos ver localmente y también desde el ámbito de Internet si ejecu- 
tamos los procesos necesarios (DNS, dominio, redirección, etc.). 

La característica principal de este programa es su sencilla interfaz y práctico uso, 
además de que se integra completamente a nuestro sistema sin la necesidad de ins- 
talar componentes adicionales para monitoreo, como sucede con Apache Server. 
Cuando instalemos Windows, IIS no se incluirá automáticamente a nuestro sistema, 
pero estará disponible para instalarlo desde el CD de instalación. Para poder instalar- 
lo en nuestro sistema, tendremos que colocar el CD en nuestra lectora de CD-ROM, 
y luego recurrir a la opción Agregar o quitar programas del Panel de control de Win- 
dows. Allí seleccionaremos la categoría Agregar o quitar componentes de Windows. Ten- 
dremos que aguardar unos instantes y se completará una lista con todas las aplicacio- 
nes que incluye el CD de Windows que colocamos en la lectora. Los que están marca- 
dos con una tilde son los programas que ya se encuentran instalados en nuestro siste- 
ma. Para instalar IIS, lo buscamos en la lista, lo marcamos y presionamos el botón 
Siguiente. Se completará un proceso de instalación, para que luego se nos presente la 
finalización. Conviene reiniciar nuestro sistema luego de este procedimiento. 


BBC AA AOS 


Componentes de Windows 
Puede agregar o quitar componentes de windows xP. 


Para agregar o quitar un componente haga clic en la casilla de verificación 
correspondiente. Una casilla sombreada indica que sólo se instalarán algunas de sus 
opciones. Para ver lo que se incluye en un componente, haga clic en Detalles. 


Componentes: 

O] 2) Otros servicios de impresión y archivo de red 00MB A 
Y] P Servicio de Index Server 0,0 MB 

C] ő Servicios de fax 3,7 MB 

M ~E Servicios de Internet Information Server (IIS) 

Sa Servicios de ren namap_Y 





Descripción: Incluye compatibilidad Web y FTP además de compatibilidad con 
FrontPage, transacciones, Páginas Active Server y conexiones con 
bases de datos. 


Espacio total en disco requerido: 16,0 MB 


Espacio disponible en disco: 3290,6 MB 





Figura 4. Dentro de IIS encontraremos muchos componentes. 
Podemos personalizar cuáles instalar presionando el botón Detalles.... 


Características 
El servicio de páginas web de Internet basa sus comunicaciones y transferencias a 


través del puerto HTTP del protocolo TCP/IP. El puerto HTTP tiene asignado 
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por defecto el número de puerto 80, por lo que los clientes web, es decir, los na- 
vegadores, siempre intentarán establecer sus conexiones en este puerto. 
Microsoft IIS posee una gran implementación en cuanto a la orientación a compo- 
nentes, soporta una gran cantidad de clientes simultáneos y, como vimos, es muy 
fácil de instalar. Otra de sus características es que el mantenimiento de sitios me- 
diante esta herramienta es realmente sencillo y no tan dependiente como sucede 
con otros servidores web, como por ejemplo, con Apache. Quizás este último (que 
analizaremos posteriormente) es más confiable a la hora de la seguridad, pero IIS se 
convierte en una excelente opción para usuarios estándar. 


Comprobación del sitio 

La versión de IIS que aprendimos a instalar anteriormente y que incluye Win- 
dows XP es la 5.1. Este servidor ofrece un administración fácil de entender y de 
manejar. Esto se realizará mediante el Administrador de servicios de Internet, un 
servicio sumamente completo. 

Una vez que terminamos de instalar IIS, ya tendremos configurado un sitio web 
predeterminado. Éste se instalará en un directorio determinado de nuestro disco 
raíz. Podemos acceder a esta carpeta en C:/Inetpub/wwwroot/. Allí se ubicará una 
serie de archivos que conforman el sitio web estándar de nuestro servidor. Luego, 
mediante el Administrador de servicios de Internet, podremos modificar estos va- 
lores, pudiendo cambiar el directorio asignado para los sitios y su contenido, y 
hasta podremos crear dentro de él diferentes subdirectorios para almacenar distin- 
tos sitios web. La dirección del sitio será la correspondiente al equipo local. Esto 
significa que tendremos que indicar al navegador que se dirija al sitio configura- 
do por defecto en el equipo local mediante el protocolo HTTP. Por lo tanto, pa- 
ra acceder a este sitio localmente, tendremos que poner en el navegador la di- 
rección http://localhost. El nombre localhost podremos cambiarlo por el nom- 
bre del equipo o el número de IP local o de red. En el primer caso, si nuestro 
equipo se llama por ejemplo, SERVER1, podremos indicar al navegador la direc- 
ción http://serverl. Si deseamos acceder al sitio local vía IP, debemos tener en 
cuenta si nuestra computadora pertenece a una red o no. Si nuestro equipo for- 
ma parte de una red, podremos especificar el número de IP correspondiente, por 


i DETALLES DE LA INSTALACIÓN 


Si recurrimos al botón Detalles... para establecer las propiedades de la instalación de IIS, veremos 
que contamos con varios componentes adicionales, como las Extensiones de servidor de FrontPage 
[compatibilidad y globalización con entornos de diseño de FrontPage], el Servicio de Protocolo de 
transferencia de archivos [servidor FTP) o el Servicio SMTP (servidor de correo electrónico). 
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ejemplo, http://10.0.0.5. Si, por el contrario, nuestro equipo es una PC indivi- 
dual que no conforma ninguna red, debemos indicar el número de IP por defec- 
to que se le aplica al equipo local en Windows, es decir, http://127.0.0.1. 


Ma 


Archivo Edición Wer Favoritos Herramientas Ayuda 


> Atrás ~ |æ) El y Búsqueda >) 7 Favoritos CA) Multimedia a 


Dirección | to: localhost 


pe A E | 
Bienvenidos 


Bienvenido a nuestro sitio en internet, El objetivo principal de estas páginas es proporcionarle toda la 
información útil sobre nuestra empresa necesaria para poder lograr entablar los mejores negocios con 
usted, 


TOADDESIGN fue creado en el año 2000, despreniéndose de MyDaernon, el sistema de gestión 
especializado. 


En este sitio, encontrará todo acerca de este completo ssitema de software. 
Siéntase libre para recorrer este sitio. Si tiene commentarios o preguntas sobre nuestros servicios, o 


simplemente necesita más información, haga clic en el botón de contacto en cualquier página dentro 
de este sitio. 











4 Intranet local 


Figura 5. Comprobación del funcionamiento 
del sitio mediante la dirección http://localhost. 


Cuando intentamos acceder al sitio localmente, IIS estará configurado para leer au- 
tomáticamente un archivo inicial denominado index.html, ubicado en el directorio 
raíz del servidor web. Esto también podremos modificarlo desde el Administrador de 
servicios de Internet. 

En síntesis, mediante cualquiera de estas maneras podremos comprobar la adecua- 
da instalación de IIS accediendo a nuestro sitio web principal. De hecho, si nues- 
tros trámites de registro de dominio y redireccionamiento han concluido satisfacto- 
riamente, también podremos acceder mediante nuestro nombre de dominio. 


nm .HTACCESS EN APACHE 


El archivo .htaccess es un archivo de texto que Apache utiliza para aplicar determinadas reglas a 
los directorios y archivos del sitio. Si tenemos que sintetizar su función, es la de contener cier- 
tas directivas que indican al servidor web el método que seguirá dependiendo de los usuarios y, 
además, definir otras normas secundarias para los archivos. 
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Los servicios 

Al instalarse en el sistema, Microsoft IIS se apoya en dos factores fundamentales: 
el Administrador de servicios de Internet y la publicación web. Estos dos elemen- 
tos se presentarán y registrarán en Windows como servicios, y para que el servi- 
dor funcione correctamente, ambos deben estar en estado activo. Para comprobar 
que los dos servicios se están ejecutando y se encuentran activos, debemos recurrir 
a la herramienta Servicios de las Herramientas administrativas del Panel de control 
de Windows XP. Allí se nos mostrará una lista con todos los servicios instalados en 
el sistema, indicándonos cuáles están activos o detenidos. Nosotros debemos bus- 
car los servicios Administración de IIS y Publicación en World Wide web. Ambos de- 
ben estar activos y con inicio automático. 


_| Tipo de inicio | Iniciar sesión co... | 


a Acceso a dispositivo de interfaz humana Habilita el acceso de entrada g... Deshabilitado Sistema local 


SBa Actualizaciones automáticas Habilita la descarga e instalaci, Iniciado Automático Sistema local 
iin Adaptador de rendimiento de MI Proporciona información de la ... Manual Sistema local 

'ublicación en World Wide Web Proporciona conectividad y ad... Ad Sl 
o ead malaia EDAS Fermite administrar los servicio... a Sistema local 
dba Administrador de carga Administra transferencias sinccr... Iniciado Automático Sistema local 





Sn Administrador de conexión automática d... Crea una conexión a una red r. Iniciado Manual Sistema local 


Figura 6. Tendremos que comprobar el funcionamiento y estado 
de los dos servicios clave para que nuestro servidor trabaje sin problemas. 


Administrar nuestros sitios 

Llegó la hora de comenzar a configurar nuestro servidor y administrar los archivos de 
nuestros sitios web. Para ello, debemos ejecutar la opción Servicios de Internet Infor- 
mation Server de las Herramientas administrativas del Panel de control de Windows. 

Se ejecutará una nueva ventana desde donde podremos organizar y configurar 
nuestros sitios. En ella tenemos una categoría principal denominada Servicios de 
Internet Information Server (que representa al servidor), de la cual se desprenderán 
todos los sitios que deseemos configurar. En principio se mostrará un solo sitio lla- 
mado Sitio web predeterminado, que será al que accedimos anteriormente median- 
te la dirección http://localhost (o alguna de sus variantes). Recordemos que este 
sitio está ubicado en la carpeta C:/Inetpub/wwwroot/. Si nosotros ya tenemos dise- 
ñado nuestro sitio y éste se encuentra almacenado en otra carpeta de nuestro equi- 


mm EL COSTO DE LOS DOMINIOS 


Como ya hemos analizado mediante el uso de entidades pertenecientes al NIC, la mayoría de los 
dominios regionales, es decir, pertenecientes a un país, se consiguen de manera gratuita, por ejem- 
plo, los .com.ar o los .com.mx. En cambio, los nombres de dominio de nivel internacional poseen 


un costo, siendo el .com y el .net los más económicos y los .TV y .CC, algunos de los más costosos. 
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po, para incluirlo como sitio principal de nuestro servidor web, bastará con elimi- 
nar todo el contenido de la carpeta wwwroot y copiar allí el contenido de nuestro 
sitio personal. También, como dijimos antes, podríamos crear una carpeta para 
cada sitio que deseamos implementar. Todo esto podremos hacerlo desde el Admi- 
nistrador de servicios de Internet Information Server o sencillamente desde nuestro 
explorador de Windows. De esta manera, podremos ir administrando los archivos 
de nuestros sitios para luego aplicarles los alias, dominios y redirecciones necesa- 
rios para su correcta publicación. A continuación analizamos los procesos princi- 
pales para establecer las propiedades de nuestros sitios. 


EEE T ELAS 


Archivo Edición Yer Favoritos Herramientas Ayuda 
Q Atrás y 7 Búsqueda Carpetas E- 
iirección (4 Herramientas administrativas 


| ; A e Administrador de Extensiones de 
Tareas de archivo y carpeta ^ dor 


mj on nombre a este 


arc 


y Mover este archivo 


À Copiar este archivo 
($ Publicar este archivo en Web f Microsoft .NET Framework 1.1 


¿3 Enviar este archivo por correo ars i 
electrónico cceso directo 2 KB 


| Xx Eliminar este archivo 


Servicios 
Acceso directo 
i Ẹ 2 KB 
1 Otros sitios 
A Servicios de Internet 
| g Panel de control | À direc £ fhrformation Server 
Lj Mis documentos ZKE SN ESC 





(y Pocumentos compartidos 


4 Mi PC 


WJ Mis sitios de red 
-2 





Detalles 


Servicios de Internet 
Information Server 
Acceso directo 


Fecha de modificación: lunes, 17 de 
julio de 2006, 7:28 





Figura 7. Podremos encontrar el Administrador 
de IIS en las Herramientas administrativas del sistema. 


El Administrador de IIS 


Para poder aplicar mejor las tareas que veremos próximamente, será necesario 
conocer a fondo nuestra herramienta de administración de sitios. Analicemos 
entonces el Administrador de servicios de Internet Information Server. 


o DIRECTORIOS VIRTUALES 


En un sitio dentro del Administrador de IIS, su contenido será ubicado localmente en la ubicación 
especificada en Propiedades/Directorio particular (por defecto, C:/Inetpub/wwwroot). Podremos 
agregar carpetas que no estén dentro de ese directorio, denominados directorios virtuales, y pode- 
mos agregarlos con clic derecho sobre nuestro sitio y luego, en la opción Nuevo/Directorio virtual.... 





170 


Nuestro propio servidor web 


Administrador lIS GUÍA VISUAL 1 








RARA AA AE 

Archivo Acción Yar Ayuda 

> E 

14 Servicios de Internet Information Serve 

O CENTRALES equipo local c: windows helptiishelp 
gen Do : i C:InetpubisScripts 

= eat able | C:WINDOWSwebltsweb 


a Se ho CArchivos de programal Archivos c... 
+ j 
48 Scripts i C:WINDOWSweblprinters 


+ Lg tsweb 
+) Lg _vti_bin 


+ [Lg Printers — 
+- images L vti_cnf 
+- _private CI _vti_log 


+ (Y _vti_cnf J_vti_pvt 
+3 _vti_log L3_vti_script 
+3 _vti_pvt 
+] _vti_script 
+- vti txt [9] iisstart. asp 

+ a Sitios FTP la] localstart.asp 

+5 Servidor virtual SMTP predeterr [19] mmc. gif 


19] pagerror. gif 
18] postinfo, html 
















[s] print. gif 








© Árbol de contenidos del sitio web seleccionado. 

O Sitios web. 

© Nombre del equipo servidor. 

O Visualización del contenido del elemento seleccionado. 
9 Subir un nivel en la estructura de directorios. 

O Ver las propiedades del elemento seleccionado. 

O Refrescar el contenido del elemento seleccionado. 

© Iniciar el servidor web. 

O Detener el servidor web. 

© Pausar el servicio del servidor. 


Propiedades del sitio 

Para poder visualizar y modificar las propiedades de un sitio web, tendremos que 
realizar doble clic sobre éste en el panel de la izquierda y seleccionar la opción 
Propiedades. También podemos seleccionarlo con un simple clic y presionar el 
botón Propiedades de la barra de herramientas. 
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A E a 





Archivo Acción Wer Ayuda 
es mE ARAE» 
13 Servicios de Internet Information Server | Descripción [Estado | 


=- FREEZER (equipo local) «8 Sitio Web predeterminado Activo 
a- 





c 


J-A 
4 


Exportar lista... 


— En E e EE 


Z Ayuda 


+) 


+ Lg IBMWebas 

3 sePlugins 

—) aspnet_client 

23 deyde_2005-11-05 
] deyde_2005-11-10 
J images 

J private 

Y vti cof 

3 _yti_log 

Cy _vti_pyt 

y _vti_script 

4] vti bet 

1-1] Sitios FTP 

+5 Servidor virtual SMTP predeterminado 


L 


+ le el le) + 


[+t] 








Abre la página de propiedades de la selección actual, 





Figura 8. Para configurar nuestro sitio, debemos hacer clic 
derecho sobre él y seleccionar la opción Propiedades. 


Cuando se muestre el cuadro de propiedades del sitio, veremos que contamos con 
varias pestañas. Éstas nos permitirán configurar diferentes aspectos de nuestro sitio. 
Las principales son Sitio web, Directorio particular, Filtros ISAPI y Documentos. 

La primera pestaña, Sitio web, cuenta con varias opciones para administrar el 
funcionamiento básico de nuestro sitio. Dentro del sector Identificación del si- 
tio web, contamos con Descripción (nombre del sitio en IIS), Dirección IP (per- 
mite configurar una dirección IP específica para el sitio) y Puerto TCP (configu- 
ra el puerto HTTP, que por defecto será el 80). También contamos con el cam- 
po Conexiones, mediante el cual podemos establecer un tiempo de espera má- 
ximo para establecer conexiones HTTP. Si este tiempo es superado por alguna 
conexión, ésta se cerrará. Otro factor importante es la utilización de registros 
del sitio. Con esta opción podremos almacenar toda la información relaciona- 
da con los accesos al sitio web en diferentes formatos. 


oi DOCUMENTOS DE INICIO 


Dentro de la pestaña Documentos del cuadro de propiedades de un sitio, contamos con la posibilidad 
de establecer los archivos que el servidor aceptará como iniciales en las páginas. Podemos agregar 
los archivos y su extensión, y configurar la prioridad de uno sobre otro. Por ejemplo, si agregamos 


index.html con prioridad sobre index.asp, se tomará como inicial index.html. 
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Una vez que configuramos estas propiedades de acuerdo con nuestras preferencias 
y necesidades, podremos pasar a la pestaña Directorio particular. Allí podremos es- 
tablecer las características en el acceso del servidor a los archivos del sitio. Conta- 
mos con la posibilidad de, además de configurar una carpeta local como origen de 
los archivos, indicar al servidor como ruta de acceso una carpeta compartida por 
otro equipo de la red interna o una dirección de Internet externa. 

En el campo Ruta de acceso local es donde podremos modificar el origen de los 
archivos de nuestro sitio. De forma predeterminada, éstos se almacenarán en la 
carpeta C:/Inetpub/wwwroot/. Desde aquí podremos seleccionar cualquier otra 
ubicación de nuestro equipo, así como también establecer los permisos de la 
carpeta y algunas opciones más. Finalmente, en la sección Configuración de la 
aplicación podremos establecer las propiedades de las aplicaciones adicionales al 


HTML, como ASP, PHP o CGI, factor que analizamos a continuación. 


Propiedades de Sitio Web predeterminado E E 


Documentos | Seguridad de directorios | Encabezados HTTP | Errores personalizados | 
Sitio Web Operadorez | Rendimiento | Filtros 154Fl | Directorio particular | 








Identificación del sitio web 


Descripción: [Sitio web predeterminado 
Dirección IP: [[Ninguna asignada] Í ” | Avanzadas... | 


Puerto TCP: [eo Puerto SSL: | 


Conexlonez 


Tiempo de espera de la conexiór: | 900 segundos 


[4 Habilitar mantenimiento de coneziones HTTP abiertas 


s! Habilitar registro - 


Formato de registro activo: 


| Formato de prepa nee pera ne ME + | 












































Figura 9. En la pestaña sitio web podremos configurar, 
entre otras cosas, el puerto de acceso a HTTP 


Aplicaciones ISAPI 

Existen aplicaciones (desarrolladas en diferentes lenguajes) que se pueden apli- 
car a las páginas web. En el próximo capítulo analizaremos algunas, pero para 
que nuestro servidor tenga compatibilidad con ellas, debemos configurar la ex- 
tensión y su intérprete dentro del sitio web. Es decir que, por ejemplo, para que 
nuestro servidor pueda mostrar páginas web en formato ASP, tendremos que es- 
tablecer en las propiedades del sitio, que la extensión se interpretará con el pro- 
grama ASP (Asp.dll). Así sucede también con otros casos como con PHP (pa- 
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ra lo que será necesario instalar el intérprete en el equipo) o las aplicaciones 
CGI. Estos intérpretes son denominados aplicaciones ISAPI en IIS. 

Para agregar una extensión, primero debemos situarnos en el sitio directorio que se- 
rá el punto de partida para interpretarla, hacemos clic derecho sobre él y selecciona- 
mos Propiedades. Luego nos dirigimos a la pestaña Directorio particular y, en el cam- 
po Configuración de la aplicación, presionamos el botón Configuración.... En el nue- 
vo cuadro que se abre, se mostrará la lista con todas las aplicaciones adicionales. Para 
incorporar una nueva, simplemente debemos presionar el botón Agregar. En el cua- 
dro Ejecutable debemos seleccionar el programa o archivo que interpretará a la aplica- 
ción, y en el campo Extensión, la extensión que tendrán los archivos de este formato. 


Configuración de aplicación 


Opciones de caché | Opciones de procesa 
Asignaciones | Opciones | Depuración 


[é Almacenar en caché aplicaciones ISAF 





M Asignaciones para la aplicación— 


| Extensión | Ruta de acceso ejecutable _ 
| asa EXMINA TAS yatemSziinetervtazp. dll GET, HEA. 
| azp EMWINNT Systema netsrasp.dll GET.HEA. 
| .cd¥ EXMINATA S yatemSzinetervtazp. dll GET, HEA. 
CEI EXMAINATA S yatemSzinetervtazp. dll GET,HEA. 
| htr EXMAINN TAS ystema2rineteryá tera. dll GET. POS 
| ht EXMMINANTA System urnebhita dl GET,HEA. 
| ida EXMAMINANTA S ystem3241dq. dll GET,HEA. | 
Ade EXIT Systemdcuneterthtpodb... OPTIONS. 
| dq EXMAMINANTA S ystem3241dg. dll GET, HEA. 
| printer EMWINN TS Systema smew apr. dll GET.POS” 
| EXMINATA System inetertssimo. dll GET,POS” = 
m 
+ | 
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Figura 10. Mediante la Configuración de aplicación, 
nuestro servidor podrá interpretar todas las extensiones web. 


Apache Server 

Si tenemos que analizar una alternativa para montar un servidor web y que ésta 
se diferencie de IIS, tenemos que hablar de Apache. 

Apache es una aplicación de servidor originalmente desarrollada para plataformas 
UNIX, destinada a cumplir con tres pilares básicos en cuanto a su implementación 
y uso: seguridad, velocidad y estabilidad. Finalmente, luego de mucho desarrollo, 
se lograron con creces estas metas fundamentales, haciendo de éste uno de los más 
utilizados por grandes compañías y redes globales. Hoy en día, la mayor parte de 
los servidores web en el mundo son implementados por el sistema Apache. Pero 
además de todas estas contundentes características, Apache posee una característica 
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que lo hace único y sumamente fácil de adquirir: su licencia es de distribución li- 
bre, es decir, que es un programa Open Source (código abierto) que puede ser uti- 
lizado, copiado y modificado por cualquier usuario. A causa de esto, podremos ob- 
tener Apache sin la necesidad de abonar ningún costo económico, simplemente po- 
dremos descargarlo de Internet. El sitio oficial de Apache es www.apache.org, y 
podemos descargar las últimas versiones del programa (recomendamos la 2.2 esta- 
ble) desde http://httpd.apache.org/download.cgi. Si descargamos la versión 
Source, el archivo que se descargará estará comprimido. Debemos extraer todo su 
contenido dentro de la carpeta C:/Apache. Igualmente, como nosotros trabajamos 
con Windows XP, lo mejor será descargar el archivo instalador, que mediante 
unos simples pasos nos permitirá incluir el servidor apache en nuestro equipo. 


MN instalar Apache NAO AO 


ul Se le dará la bienvenida al asistente de instalación. Presione Next para continuar. 


El Acepte los términos de licencia para poder continuar con la instalación (I accept 
the terms in the license agreement). Presione Next para continuar. 


[a Apache HTIP Server 2.2 - Installation Wizard 


License Agreement 


Please read the Following license agreement carefully. 


Apache License 
Wersión 2.0, January 2004 
http: www.apache.orglicenses/ 
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 


1. Definitions. 


"License" shall mean the terms and conditions for use, reproduction, and 
distribution as defined by Sections 1 through 4 ofthis document 


X accept the terms in the license agreement 


CM do not accept the terms in the license agreement 





A continuación se le muestra el archivo de información básica de Apache. Pre- 
sione Next para continuar. 


4 Detalle los datos de su servidor: dominio (no es fundamental), nombre del servi- 
dor y dirección de e-mail válida. 


p 
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¡3 Apache HTIP Server 2.2 - Installation Wizard 


Server Information 


Please enter your server's information. 


Network Domain (e.q. somenet,com) 


lsery,com.ar 


Server Name (e.9. www.somenet, corn): 


IDEEPCOLD.serv.com.ar 


Administrator's Email Address (e.g. webmasteríWsomenet, com): 


infoídserv,com.ar 


Install Apache HTTP Server 2.2 programs and shortcuts for: 


© for All Users, on Port 80, as a Service -- Recommended, 
O only for the Current User, on Port 8080, when started Manually. 





E Seleccione el tipo de instalación que prefiera. Recomendamos la típica (Typical) 
para evitar cualquier error. 


6 Elija la carpeta en donde se instalará el servidor Apache. Aunque conviene de- 
jar la que aparece, puede modificarla mediante el botón Change. 


¡3 Apache HTTP Server 2.2 - Installation Wizard 


Destination Folder 


Click Change to install to a different Folder 


EE y Install Apache HTTP Server 2.2 to the folder: 


CuArchivos de programalApache Software 
Foundation Apache2.21 





e | Cancel 


Finalmente se le avisará que está listo para instalar Apache Server. Para pro- 
seguir, presione Install. 


8 Se ejecutará el proceso de copiado de los archivos. Posteriormente se mos- 
trará un aviso de finalización. 
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Una vez que finalizamos la instalación, Apache Server se ejecutará y se registrará co- 
mo servicio del sistema automáticamente. Esto quiere decir que cada vez que ini- 
ciemos nuestro sistema operativo, Apache se ejecutará y activara solo, sin la necesi- 
dad de que ejecutemos ninguna aplicación. Podremos ver que cuando Apache se 
está ejecutando, un icono se ubica en el Área de notificación de nuestra barra de ta- 
reas. Al realizar un clic sobre él, se mostrará un menú denominado Apache, que nos 
brinda tres opciones: Start, que iniciará el servicio de servidor web Apache en caso 
de estar detenido, Stop, que lo detendrá, y Restart, que lo reiniciará. 


a 
A Apache Service Monitor 
wii T — 


Service Status : 
> E 
ost] 
Stop | 
Services | 
Connect | 


apache/2.2.2 (Win32) 





Figura 11. Apache monitor nos permite controlar 
el funcionamiento del servicio de servidor web Apache. 


En el caso que hagamos doble clic sobre este icono, se abrirá la aplicación Apache 
monitor, que se trata de una ventana que nos indica si el servicio está ejecutándose, 
y también permite detenerlo y reiniciarlo. Otra opción del Apache monitor es que 
nos da la posibilidad de conectar a otro servidor remoto. Además, mediante el bo- 
tón Services, podremos acceder a la herramienta de administración de servicios de 
Windows para verificar que el servicio correspondiente esté funcionado y activo. 
Finalmente, si hacemos clic derecho sobre el icono de Apache, se nos mostrará un 
menú que también nos da acceso al Apache monitor y a los servicios. 


nm SERVIDORES PROXY 


Un servidor proxy es un equipo o software intermediario entre los clientes de Internet y una red. Su 
principal función es permitir la conexión a Internet de varios equipos de una misma red local, sin que 
éstos dispongan de una conexión directa. También sirve para restringir determinados accesos a al- 
gunos servicios de Internet, dependiendo de las políticas de red que se establezcan en la red local. 
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AOS 
Archivo Acción ver Ayuda 
Ea] R m | m 


R ici Yo Pi K3 
Ey Servicios locales) E ES! 


Apache2.2 Nombre Descripción | Estado Tipo de inicio Iniciar sesión como | 
ybtos Ofrece con... Iniciado Automático Sistema local 
maoa p ss ha Acceso a dispositivo... Habilita el a... Deshabilitado Sistema local 
Sl Sy Actualizaciones aut... Habilita la d... Deshabilitado Sistema local 
¿Kg Adaptador de rendi... Proporcion... Manual Sistema local 
Descripción: ! Eg Administración de a... Ofrece ser... Manual Sistema local 
ALA LI By Administrador de ca... Administra... Iniciado Automático Sistema local 
SRy Administrador de co., Creaunac,., Iniciado Manual Sistema local 
Sa Administrador deco... Creaunac... Iniciado Manual Sistema local 
¿a Administrador de cu... Almacena i... Deshabilitado Sistema local 
“Ba Administrador de di... Detecta ys... Iniciado Automático Sistema local 
¿Eg Administrador de se... Administra ... Manual Sistema local 
¿Bs Adquisición de imág... Proporcion... Iniciado Automático Sistema local 
¿By Almacenamiento pr... Ofrece alm... Iniciado Automático Sistema local 
al A Automático Sistema local 
Sy Aplicación del siste Las Administra l... Iniciado Manual Sistema local 
SRA ASP.NET State Serv... Provides su... Manual Servicio de red 
Sa Audio de Windows Administra ,.. Iniciado Automático Sistema local 
4 Ayuda de NetBIOS ... Habilita la c... Iniciado Automático servicio local 
By Ayuda y soporte té... Habilita la e... Deshabilitado Sistema local 
Bs Cliente de seguimie... Mantiene ví... Iniciado Automático Sistema local 
¿Bs Cliente DHCP Administra l... Iniciado Automático Sistema local 
“Ba Cliente DNS Resuelve y... Iniciado Automático Servicio de red 
ig Cliente Web Habilita los ,., Iniciado Automático servicio local 
Sa Cola de impresión Carga archi... Iniciado Automático Sistema local 
sn _ a m . Le ' ei x . . 








X, Extendido A Estándar / 





Figura 12. Apache utiliza un solo servicio para funcionar en el sistema. 


Configurar Apache 

Con respecto a la configuración inicial, en Apache el directorio de los sitios (así 
como en IIS era predeterminadamente C:/Inetpub/wwwroot/) estará configurado 
por defecto en la carpeta htdocs de la carpeta del programa. Suponiendo que Apa- 
che se haya instalado en C:/Archivos de programa/Apache2.2/, el sitio principal esta- 
rá establecido en la carpeta C:/Archivos de programa/Apache2.2/htdocs/. En cuanto 
a la prueba del sitio, se podrá realizar de la misma manera que con IIS, es decir, a 
través de http://localhost o http://127.0.0.1 podremos acceder al sitio que Apa- 
che Server establece de forma predeterminada. Entonces, de la misma manera que 
con IIS, con sólo reemplazar los contenidos de esa carpeta por los de nuestro si- 
tio personal mediante el explorador de Windows, ya podremos personalizarlo. 
La configuración del servidor IIS se realizaba mediante una simple y práctica in- 
terfaz gráfica que presentaba un completo Administrador de servicios de IIS. En es- 
te punto es quizá donde encontramos un déficit en Apache, ya que inicialmente 
no posee ninguna aplicación gráfica que nos permita administrar nuestro servidor 


o LOS MÓDULOS DE APACHE 


Si bien estas páginas conforman una breve reseña sobre este servidor web, si decidimos utilizarla y 
conocerla en profundidad, podriamos encontrarnos con un término no mencionado hasta aquí: los 
módulos. Esta palabra no se refiere más que a los intérpretes para las aplicaciones. Mediante ellos, 
podremos agregar diversas extensiones para compatibilizar con nuestro servidor. 
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web. Todo tendremos que hacerlo mediante la edición de un archivo de configu- 
ración de texto plano. Sería también una forma de programar. Este archivo se de- 
nomina httpd.conf y se encuentra dentro del directorio conf, ubicado dentro de la 
carpeta principal del programa. Para poder editarlo, podemos acceder a la opción 
Edit the Apache httpd.conf Configuration File, dentro de Inicio/Todos los programas/ 
Apache HTTP Server/Configure Apache Server. 


GE trader Mires Plaga 


+1 A Corbera dcacha dere A a ol 
I g Control Apache Serre el y Tetor 
El] Revie Servan Log Pies J ; 
0 1 Coa Graphi Sta L El Aparte Orire Documentation 
MA Crestoriankra 200 | AE] Miel, Lio pacho 


E] Hermes 
E) Herat Ohie 
Ü Mero 
2 taste nascciates 
ql Meir 
ES Prinifós intenet Printing 
g heht 
E Renote Aarmrstratós vE 
m sasit 
m iri A 
0] hra Eeri 
| c ep eG h 
r webe 
E "nap 
E Wena 
E (0 *P Codec Pack 1.0.3 
Fa Inicio ad | amberenders A A An 


Dindon bus purrmprarrior k | 





Figura 13. Podemos acceder sencillamente a la configuración del archivo httpd.conf. 


Directivas del archivo httpd.conf 

A continuación analizamos los comandos más importantes del archivo httpd.conf 
para la administración de Apache Server. Si bien dentro de este documento pode- 
mos encontrar muchos comentarios acerca de las funciones de cada sentencia, se- 
rá mucho más útil detallar una lista de los comandos más relevantes. 


e ServerRoot: establece el directorio principal del sitio predeterminado. 

* Timeout: define en segundos el tiempo que el servidor espera para enviar y re- 
cibir conexiones. 

e KeepAlive: establece si se permitirá más de una conexión a la vez. Encendido: 
on, apagado: off. 

e MaxKeepAliveRequest: indica la cantidad máxima de peticiones por conexión. 
Se recomienda un valor alto, de 100 o mayor. 

e MaxClients: establece la cantidad máxima de clientes que pueden estar conec- 
tados simultáneamente. 

e Port: establece el puerto de comunicación que usará el servidor. Por defecto será el 80. 
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Listen: permite establecer más de un puerto para la comunicación. Si está activa- 
do, se dejará de tener en cuenta la directiva Port. 

ServerName: permite establecer como nombre de equipo uno diferente del real. 
DirectoryIndex: cuando un cliente no especifique un archivo para acceder y al final de 
la dirección haya un directorio, el valor de DirectoryIndex establecerá la página de ini- 
cio predeterminada para los directorios del sitio. Por ejemplo, index.html. 

Redirect: este comando nos da la posibilidad de redireccionar páginas. Es decir, cuan- 
do una página cambia de directorio, podemos pasar la ruta de origen a la nueva. 


E. httpd.conf - Bloc de notas 
Archivo Edición Formato Ver Ayuda 


# 

# This is the main Apache HTTP server configuration file. It contains the 
# configuration directives that give the server its instructions. 

* see <URL:http://httpd. apache. org/docs/2.2/> for detailed information. 

* In particular, see 

* <URL:http://httpd. apache. org/docs/2.2/mod/directives.html> 

* for a discussion of each configuration directive. 

$ 


* Do NOT simply read the instructions in here without understanding 
* what they do. They're here only as hints or reminders. If you are unsure 
* consult the online docs. You have been warned. 


+ 

# Configuration and logfile names: If the filenames you specify for many 

* of the server's control files begin with "/" Cor “drive:/" for win32), the 

# server will use that explicit path. 1f the filenames do *not* begin 

# with "/", the value of ServerRoot is prepended -- so "logs/foo. 1log" 

# with ServerRoot set to "CizAarchivos de peagr apa Apace software Foundation/Apache2.2" will be interpreted by the 
# server as "Ci/Archivos de programa/Apac 
# 


e Software FoundationyApache2.2/1o0gs/foo.1o0g”. 


* NOTE: where filenames are specified, you must use forward slashes 

# instead of backslashes (e.g., “c:/apache” instead of "c: apache"). 

* If a drive letter is omitted, the drive on which Apache.exe is located 
# will be used by default. It is recommended that you always supply 

# an explicit drive letter in absolute paths, however, to avoid 

# confusion. 

* 


* ThreadsPerchild: constant number of worker threads in the server process 
# MaxRequestsPerchild: maximum number of requests a server process serves 
ThreadsPerchild 250 

MaxRequestsPerchild 0 


# 
* serverRoot: The top of the directory tree under which the server's 
* configuration, error, and log files are kept. 

+ 


# Do not add a slash at the end of the directory path. If you point 
* ServerRoot at a non-local disk, be sure to point the LockFile directive 
* ata local disk. If you wish to share the same serverRoot for multiple 





Figura 14. El archivo httpd.conf se puede editar mediante 
cualquier editor de texto y sus comentarios son muy claros. 


Simulación de IP estática 

Un gran arma a la hora de generar visitas en nuestros sitios es la adecuada y com- 
pleta identificación dentro de Internet. Como ya sabemos, esto lo logramos a 
través de los nombres de dominio, los números de IP y los DNS. 

La mayor parte de las conexiones a Internet nos permiten conectarnos a la gran red 
a través de un número de IP. Siguiendo un proceso tradicional de resolución de 
nombres, lo único que tendríamos que hacer para contar con un dominio asignado 
a nuestro sitio es registrarlo y asociarle el número de IP de nuestra PC. Pero aquí se 
plantea un primer inconveniente: en la gran mayoría de las conexiones, nuestra di- 
rección IP será dinámica, lo que significa que en cada sesión de conexión conta- 
remos con un número IP diferente. Las direcciones IP estáticas (que no varían en 
cada sesión) son sólo asignadas en conexiones corporativas o en redes locales. 

Para lograr asignar un número IP fijo a nuestro nombre de dominio, primero tendría- 
mos que tenerlo en nuestra computadora. Esto es casi imposible sí no contamos con 
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un servicio de Internet corporativo que nos brinde una IP fija. Para solucionar este pro- 
blema, existe una útil aplicación que nos permitirá simular, mediante una cuenta per- 
sonalizada, que contamos con una IP estática, aplicándole un alias de dominio a cual- 
quier IP que establezca nuestra conexión. Este programa se llama No-IP DUC y bási- 
camente funciona como una IP estática: se iniciará con nuestro sistema y aplicará un 
dominio virtual a nuestra computadora, que podremos utilizar estáticamente para con- 
figurar nuestros dominios, delegaciones y redireccionamientos sencillamente. 

Como primer paso, tendremos que crear una cuenta personal en el sitio oficial de 
No-IP, donde tendremos que elegir un nombre de usuario y una contraseña. La fun- 
ción más importante que vamos a asignarle a No-IP dentro de nuestro servidor web 
es la de poder contar con un valor estático para asignar nuestros dominios. 


Crear una cuenta en No-IP.com 

El primer paso que debemos realizar para poder crear una dirección de No-IP virtual se- 
rá registrarnos como usuarios en su sitio. Esto nos da la posibilidad de, a través de una 
cuenta de correo cualquiera, poder lograr el redireccionamiento. Para empezar debemos 


visitar el sitio de No-IP: www.no-ip.com. Veamos paso a paso cómo continuar. 





MW Registro de nuevo usuario PASO A PASO 


El En la barra superior del sitio, vaya al link Sign-Up Now! para registrarse. 


AAA AO 

Arda Cdcón we Pivots Fièmimianmas Anali 

D irki. = 1 =l] ; s Papa Priti al mimea giy 
F z G maa F f a 


dEl hey plas rop pond 


WELCOME DO MA PLCOAS 

- Mo-1F Plus 
Rudablr dentro DA dre ibid 
baremos dm ira 


MOE a mara MS error por, Y 
EE G ida Ol AAA AA o al 
pipentá, KoT Bataa DNS do pig ro EPA vto 
NA A A iaga i na 
Sota repapi oí recurra 1 ara 
ring 100% upra * Ha-1P Mall 
POPT tt ribera. AE AL L 
PLLZA, GS. Hará ba 


Feature Highlight Nod? Damalas 
Keep an eye on things SRL EE 


at home while traveling PP 


Comed o Piba] oare 
and WAS mir arare in tha a HMo-1P Free 
Liar hebra 


= wortd wih e nieret conmecban ipngmis DHA mna isah 
id pirrelas. Ilo paka 
AA 


= Additional Services 


PRIVATE REGISTRATION -prms 


Lig i cheap, bu rh pead more Pen Mo-i Frea oiT? 


= HoF quid ed 
Saca 4 Mal ace rra i E 





[2] Una vez que completó el formulario, acepte los términos y presione Sign Up Now!. 
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» 


Si la información que brindó es correcta, recibirá un mensaje de correo a la casilla 
indicada con un link para activar la cuenta. Siga las instrucciones para activarla. 


AA de AA Microsadt me 
Edhe [ide p p bereme Acces iÈ 
E siia e OA oa aiB lodos es | rie | e LL 
SEO EE] i 
Mo-P.com Activatiorm 
A HoP Registatos Junrnonitotedwebmasterípnoipucon] 
ra pablo iiem vam 


Cobyracalatione, he Hó-1 accamia *pablsevarquezó gmail. cot 
haa hs created; To activarse Tour account plana cláck on thè 
BOJ Chipata paritat | DEIAL iOm HEL e dam, 
Harald ja des entrena i y pci Ha-=1P's basic dyeónie DE servicos is rér, made possible by cue 
cd Bardaja de Hokia P paid services. If po are interested in dyeamie IWS for your 
oun doin plesse consider our Mo-1P Plus services For mOrTeE 
informacion about aro paid services visit lccpr ura ra 


SSL A dl 


Ta activate yor ateos please click. the following EL: 
Drepp ruwne- ip comfaccivates tds 1cds5beccoába 


Aaa ERATE FO cAñ usa sur diñiñrde Update ljane ES 
mice lle dpi pende boag whin vyobr dynamig IFP adñdresa 
changes, Toi cun Boentoaá Ehe clini mE (A EA 
LANE EA A 


Îi gou baire any further y k P sa cur Filo me 
Hte£ptf ada. ho 1 p, E Ta. pp and guides fest Lon aL 

nte pi li ¿pecar guides. pip, EF rá ari01 he qurabiona 
ontact support hy ecpenisg a Eecuble ticket àt hiipi’ use nu 
ip comfriebpis + 


Thank you for chocsing Mo-1P. om 


Aio Ekin Ve Paris Heraki -Aruh 


> E 
a) (D Eh J needs 


mewn i hig je a | Leaba 
Io A A e e g A es, a, ee 


P) No-1P.com 


Acooimt Condinnmedr 


four account has besa confrmed and m nov read tor ca. Please en the logan box above bo 


al rnr amre 


A HH 
Pia Pabe 


MALA E 
HA FE $e 


FEO 4345 


Sucrént Tree: Mon 4d 17 0.00:25/P07 





e] En la página nueva establezca los datos correspondientes de la cuenta recien- 
temente creada (mail y contraseña). 


6 Accederá por primera vez a su cuenta de No-IP. 
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Agregar el servicio de redirección 

Antes de descargar y comenzar a utilizar el programa, conviene crear el servicio de 
redireccionamiento virtual para nuestro servidor web. La redirección que debemos 
establecer es a partir de nuestro número de IP actual que está corriendo el servicio 
sobre el puerto 80 (web), lo que permite tomar como directorio base el directorio 
raíz de nuestro servidor web. Luego, cuando ejecutemos el programa como un 
servicio del equipo local, aunque la IP cambie, al estar ejecutándose No-IP, se man- 
tendrá el vínculo con la redirección virtual. Veamos entonces cómo adicionar un 
nuevo servicio de redirección a través del puerto 80. 





NW Nueva redirección PASO A PASO 


EN En la página principal de nuestra cuenta, dentro de la categoría Host/Redirects 
seleccione la opción Add. 
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mm REDIRECCIÓN ESTÁTICA 


Más adelante veremos que necesitaremos aplicar un servicio de redireccionamiento a los 
nombres de dominio asignados. Aquí es donde No-IP juega su papel principal. Cuando la em- 
presa de redireccionamiento nos requiera una dirección estática de nuestro servidor web per- 
sonal, podremos establecer la dirección que nos ofrece No-IP. 
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p> 


[a] En la nueva pantalla, seleccione un nombre para la redirección y un tipo de do- 
minio. Elija la opción Port 80 Redirect. 
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Una vez configurada la IP (aparece automáticamente) y el puerto (debemos 
especificar el 80), presione el botón Create Port Redirect de la parte inferior 
de la página para poder continuar. 
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EJ El sitio le muestra la confirmación de la nueva redirección. Deberá esperar 
unos minutos para que se active. 
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Descargar y ejecutar 

Ya tenemos una cuenta y una redirección creadas para nuestros sitios. Lo que falta es 
poder asociarlas con nuestro servidor web para poder acceder desde Internet. Para eso, 
debemos descargar el software de NO-IB, que mantendrá activa la redirección de for- 
ma permanente mientras nuestro equipo esté encendido. Podemos descargar No-IP 
DUC desde el sitio www.no-ip.com/downloads.php?page=win. Una vez que descar- 
gamos el archivo de instalación, lo ejecutamos. Veamos los pasos siguientes. 


E No-IP DUC OO 


uN Se le dará la bienvenida a la instalación. Presione Next para continuar. Debe es- 
tar conectado a Internet para que los siguientes pasos se realicen con éxito. 





El En el cuadro siguiente, configure la carpeta de destino del programa y habilite la 
opción Launch No-IP DUC (ejecutar el programa cuando termine la instalación). 


Installing No-IP DUC v2.2.1 


Pleaze enter the path vou wizh to install the Mo-lF updater into below: 


| Cárchivos de programas o-lP S| 


Add Frogram Group 
Launch Ho-IF DUC 
[view Readme 
[C view Changes 


Cancel 





Se instalará No-IP en su equipo. Cuando termine el proceso, presione Finish. 
Se abrirá el programa. 


Es En el cuadro nuevo, indique el e-mail y la contraseña de su cuenta creada an- 
teriormente en No-IP.com. 


» 


nm SERVIDORES DNS 


Para realizar los redireccionamientos con respecto al nombre de dominio, tendremos que averiguar 
los servidores DNS que nos proporciona la empresa. En el caso de MyDomain.com, tenemos que re- 
currir al menú Support/Regional Domains en la página de inicio. Allí se nos mostrará una lista con 


cuatro nombres de servidores DNS con sus correspondientes números de IP. 
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» 


5 Se iniciará el programa junto con el servicio de redireccionamiento. Para activar- 
lo, marque el dominio correspondiente. 
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6 En Options puede configurar el programa para que se ejecute al inicio de Win- 
dows (Run on startup) y que lo haga en forma de servicio del sistema median- 
te la opción Run as a system service. 
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Al cerrar el programa, éste no se finalizará sino que permanecerá activo para poder 
mantener con vida las redirecciones aplicadas. Veremos que en el Área de notifi- 
cación de la barra de tareas de Windows, No-IP se mantiene con un icono. Al ha- 
cer doble clic sobre éste, se abrirá nuevamente la pantalla de administración. 

Si tenemos en cuenta que nuestro sitio ya está diseñado, nuestro servidor web mon- 
tado y la redirección activa, todo indica estar en orden. Y así es: nuestro sitio ya es- 
tá presente en Internet. Para comprobarlo, podemos probar desde una PC externa 
(desde un ciber, por ejemplo) ingresar en el navegador la dirección correspondien- 
te a nuestra cuenta de No-IP, en este caso, www.toaddesign.no-ip.org. Ya tendría- 
mos que tener acceso a nuestro sitio. Pero digamos que la dirección aplicada por 
No-IP no es demasiado atractiva ni fácil de memorizar. Por lo que será convenien- 
te registrar y asignar un dominio tradicional a nuestra dirección No-IP. 


Registrar dominios 

Debemos tener en cuenta cuatro factores para poder llevar a cabo con éxito la 
asignación de un dominio a uno de nuestros sitios. Dos de esos factores ya los 
hemos analizado, por lo que nos resta profundizar sobre los dos restantes. Los 
cuatro elementos clave son nuestro servidor web personal (IIS), nuestra direc- 
ción estática virtual (No-IP), el registro legal del dominio y la redirección 
del dominio. Estos últimos conceptos serán los que vinculen nuestro servidor 
web con el nombre de dominio. La operatoria es quizá complicada en la teoría, 
pero no es compleja si la planteamos prácticamente. En principio, el sistema de 
redireccionamiento nos servirá para obtener un servicio de DNS gratuito, y 
luego para poder asignar éste al nombre de dominio. 

Cuando registramos un nuevo dominio gratuitamente, al querer delegar el sitio, 
es decir, asignar una dirección del servidor web, se nos requieren las direcciones 
y números de IP correspondientes a los servidores DNS. Es aquí donde entra en 
escena el sistema de redireccionamiento. 

Entonces, la funcionalidad del sistema sería la siguiente: contratamos el servicio de 
redirección de DNS, averiguamos las direcciones e IP de los servidores correspon- 
dientes, luego procedemos con la registración del dominio, y, al delegarlo, especi- 
ficamos estas direcciones. Cuando hayamos concluido todos estos trámites, tendre- 
mos que recurrir a la empresa que nos brinda el servicio de redirección y agregar el 
dominio registrado, para luego poder indicarle la dirección estática de nuestro 
servidor personal (No-IP). En resumen, estaríamos hablando de vínculos: del sitio 
local con el servidor web (ISS), del servidor web con la redirección estática virtual 
(No-IP), de la dirección estática con la empresa de redireccionamiento de domi- 
nios, y de esta última con el nombre de dominio registrado. Más adelante entende- 
remos el porqué de esta vinculación secuencial y explicaremos prácticamente estos 
procedimientos. Pero hablemos ahora de cada uno de ellos en particular. 


USERS o 
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Servidores DNS y redireccionamiento 

Para poder aplicar un nombre de dominio a nuestra dirección de No-IP, tendremos 
que contratar un servicio de redireccionamiento de dominios. Las empresas que 
ofrecen este servicio generalmente lo hacen de forma gratuita (su negocio está en 
brindar hospedaje o cuentas de e-mail propias), ofreciéndonos una lista de servido- 
res DNS, con un nombre y un número de IP para cada una de ellas. Estos valores 
son los que aplicaremos posteriormente en el registro de nuestro nombre de domi- 
nio para que la vinculación secuencial de redirecciones quede completa. 

Lo primero que debemos hacer es seleccionar la empresa. Existe una gran variedad de 
este tipo de compañías, pero tomaremos como ejemplo la empresa MyDomain.com, 
ya que es una de las más generales en cuanto a las funciones y utilidades, permitien- 
do así entender claramente los procesos y aplicarlos en otras empresas. Además, ofre- 
ce el servicio de redirección gratuitamente desde www.mydomain.com. Allí comen- 
zaremos registrando un nuevo usuario, para luego pasar a registrar el dominio. 


NW Nueva cuenta en MyDomain.com PASO A PASO 





ul Ingrese en el sitio www.mydomain.com. En la sección Manage your account, 
seleccione la opción Sign in, It's free!. 
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El Complete el formulario que se le presenta y presione Proceed para crear la cuenta. 


> 
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» 


La cuenta ha sido creada. Se iniciará su panel de inicio. 


E Para manejar las redirecciones de sus sitios, debe ir a la pestaña My Services. 
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Network Information Center 

Sigamos ahora con el registro de un dominio de forma gratuita. En el mundo, la 
mayoría de los países nos permitirán registrar dominios regionales libremente, co- 
mo es el caso de la Argentina o México, por poner algunos ejemplos. Las entidades 
que regulan estos dominios son normalmente identificadas por las siglas NIC (Vez- 
work Information Center) y nos dan la posibilidad de registrar un dominio regional 
de manera gratuita. Pongamos el ejemplo de la Argentina, donde la entidad NIC.ar 
(www.nic.ar) administra los nombres de dominio y sus registros. Debemos desta- 
car que todos los trámites relacionados con los dominios se realizan vía web. 

Una vez que ingresamos en el sitio de NIC.ar, tenemos una gran cantidad de op- 
ciones para ejecutar, pero basémonos en las más Importantes. 

Para el registro de dominios, es clave destacar que debemos registrarnos de forma legal 
en el sitio de dos maneras distintas: como entidad registradora y como persona res- 
ponsable. En el primer caso, tendremos que registrar nuestra empresa con todos sus 
datos legales y en el segundo, tendremos que registrar a la persona responsable de esa 
empresa. Si somos una persona individual, es decir, una persona física, en ambos ca- 
sos nos registraremos con nuestros datos personales, o sea, establecemos como entidad 
registradora los mismos valores que como persona responsable. Veamos entonces có- 
mo registrar una entidad responsable desde el sitio www.nic.ar. El registro de persona 
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es muy similar, por eso no lo detallamos más profundamente (lo más probable es que 
no nos soliciten algunos datos específicos, como el CUIT o CUIL en la Argentina, 
aunque esto puede variar de un país a otro). Recordemos también que éste es sólo un 
ejemplo y que la operatoria es casi la misma en la mayoría de los demás países. 





AE ER ele PASO A PASO 
A] Diríjase al link Trámites vía web del menú de la izquierda. 


2 En la categoría Altas, seleccione la opción Entidades. 


AI 
Ateo DSi Va Pivontos  Msnsierta Juja 
La Arda + x| a] fo A Benea. i Pivortos. Arima E 
i hip ea r 
E eo Pga aie 


Alto de Entidad 


intermbción de la Entidad 


Homme: Pablo E Warquez 
E-Malk poblorvasauie and bom 


Datos an Argentina Datos an el Exterior 
Domácilko: Falcon 1385 E 
Chiiadll ocild: Ciia Ciidad Estado: 
enosn Prisancial Events Alé 
i ¡Codigo Portal: 1705 Codigo Porat 


preken Telólono: iii case Telon 
Bania 1atI Pax: SBJEDAED Fiz 
AO 


A tiean CUITCUN: CUAL 73305936150 Mro, de Identificación: 
eii bed DHLLELE: Dia 20595617 
Fac: +44 011) 49-10, 


pp II a 


Cure coo ibi paciente y Cultos 





Ingrese una dirección de e-mail válida y a la que pueda tener acceso. 


a Rellene los datos del formulario. Cuando finalice, presione Continuar. 


» 


nm LAS CABECERAS HTTP 


Las cabeceras del protocolo HTTP permiten al servidor obtener datos del usuario para enviar res- 
puestas a las peticiones. Algunas permiten resolver datos como el navegador que se está utilizando 
(user-agent), el lenguaje en que se mostrarán los contenidos laccept-language) o en las directivas de 
la cabecera accept [accept-encoding o accept-charset), el tipo de contenido que el cliente soporta. 
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» 


E] Detalle el CUIT/CUIL y su número de documento. Presione Continuar. 
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6 En la página siguiente, revise los datos ingresados y presione Modificar si hay 
algún error o Confirmar para completar la registración. 
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Cuando finalicemos cada proceso de registro en NIC.ar (personas, entidades, 
dominios), se nos avisará que se envió un correo electrónico a la casilla especifi- 
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cada al comienzo. Esto sirve para confirmar el registro. Tenemos que respon- 
der el mensaje que se nos envió, con el contenido del mensaje original, tal cual 
nos lo mandaron. Para eso, eliminaremos todo el contenido de la respuesta que 
vamos a enviar y pegaremos el contenido del mensaje original en el cuerpo del 
e-mail. Más tarde, llegará la confirmación de que la respuesta se ha recibido con 
éxito y que se está procesando la solicitud a través de un nuevo mensaje de co- 
rreo. Finalmente, cuando la entidad reguladora apruebe el trámite en cuestión 
(puede tardar horas o algunos días) se nos enviará otro mensaje que nos avisa que 
en las 48 horas se habilitará el servicio, ya sea registro de personas, de entida- 
des o dominios. La operatoria será exactamente igual para todos los trámites. 
Una vez que tenemos finalizados los trámites de registro de entidad y persona 
(puede demorar algunos días), ya estamos listos para comenzar a registrar do- 
minios regionales gratuitamente. Antes podemos consultar la propiedad del do- 
minio que queremos registrar, es decir, saber si éste ya se encuentra registrado 
anteriormente. Si fuera así, el dominio no estará disponible (recordemos que no 


pueden existir dos dominios idénticos), por lo que debemos modificar el nom- 
bre de dominio elegido por alguno que se encuentre libre. Veamos cómo consul- 
tar la propiedad de un dominio y luego cómo registrarlo. 





E Consultas de dominios PASO A PASO 


pE En la pantalla principal del sitio de la entidad NIC elegida, indique el nombre de 
dominio que desea registrar y presione Buscar. 
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» 


B] Si el dominio no ha sido registrado anteriormente, se mostrará una pantalla 
que informa esto y ofrece registrarlo. Si el dominio no está disponible, se 
mostrarán los datos del registrante. 
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Si el dominio que queremos registrar ya estuviera registrado, podemos intentar 
contactar a quien tiene el registro y pedirle que nos transfiera la delegación. Es- 
to puede ser sencillo en algunos casos y casi imposible en otros. 


Por ejemplo, si el dominio lo hubiese registrado alguien en la época del boom de 
Internet, probablemente no tenga problemas en transferirlo, aunque tal vez nos 
pida algún dinero a cambio. En cambio, si el dominio pertenece a una empresa, 
ni siquiera vale la pena intentarlo. Cabe mencionar que el trámite de transferen- 
cia no es muy fácil: hace falta presentar una nota con firmas certificadas por es- 
cribano para poder iniciarlo. 


i GET Y POST 


Los comandos GET y POST trabajan bajo la directiva METHOD del protocolo HTTP y su función es el 
envio de datos de formularios a los servidores. La diferencia entre ambos es que el GET envía los 
datos por línea de comandos y el POST no. Debido a que algunos servidores restringen su línea de 
comandos, el POST es el más utilizado. El GET suele usarse para formularios de pocos datos. 


CREACIÓN DE SITIOS WEB 


E Registrar un dominio PASO A PASO 





E Vaya al enlace Registrar dominio del menú de la izquierda. 


El Indique el nombre del dominio que desea registrar y una dirección de e-mail válida. 
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» 


A] Seleccione la entidad y presione Continuar. Si no aparece el nombre correcto, 
presione Reformular para realizar nuevamente la búsqueda. 


AI 
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a Repita los pasos 3 y 4 con los datos de la persona responsable. 


6 Seleccione la opción Delegar, para delegar el dominio. 
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» 


Indique las direcciones de servidores DNS de la empresa de redireccionamiento. 


TAN 


miry Ean Fe Parti Herrera Pipa 


aa aria = a) a) On J aipea Faea Ainea ¿E 
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Al rod Conti 


E Especifique el nombre de la empresa de redireccionamiento y confírmela. Haga lo 
mismo con su área de soporte. 


El Ingrese el código de seguridad, acepte la licencia y confirme el registro. 


AAA 
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El praia Dato 


El Se le informará del envío del mensaje de confirmación. Verifique su casilla y respon- 
da el mensaje sin modificar el texto original en la respuesta. 


196 





Nuestro propio servidor web 


Recordemos que para poder registrar un dominio en una entidad NIC y poder dele- 
garlo a una empresa de redirección de nombres de dominio como MyDomain.com, 
debemos saber de antemano las direcciones y los números IP correspondientes de 
los servidores DNS de la empresa de redireccionamiento. Para ello debemos averiguar- 
los en el sitio de dicha empresa. Por ejemplo, en MyDomain.com podemos hacerlo de 
la manera que se indica en los pasos siguientes. No olvidemos tomar nota de estos da- 
tos para luego indicarlos en el trámite de delegación del dominio registrado. 


E Servidores DNS para dominios regionales AO AO 





ul En la página inicial del sitio, vaya a la opción Regional Domains del menú Support. 
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[2 Se mostrará una lista con un servidor primario, uno secundario y dos o más adi- 
cionales, junto con sus correspondientes números de IP. 


» 


mm HOTMAIL NO 


Debido a que a veces los servicios de algunas empresas proveedoras de cuentas de correo no 
son demasiado confiables, las entidades reguladoras [por ejemplo, NIC.ar] aconsejan no es- 
pecificar determinadas direcciones de correo, como es el caso de Hotmail. Será preferible uti- 
lizar otras empresas, como Yahoo! o Gmail. 
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» 
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El servicio de redirección 


Una vez que tenemos creada nuestra cuenta y registrado nuestro dominio (hay que es- 
perar los días necesarios), tendremos que agregarlo al sistema de redireccionamiento de 
la empresa proveedora de este servicio. Para eso seguiremos los siguientes pasos. 


E Agregar dominios PASO A PASO 


E En la categoría My Domains de su cuenta, diríjase a Manage service domains. 
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Nuestro propio servidor web 


[> 


2 Allí se le presentará la lista de dominios clasificados alfabéticamente. Para agre- 
gar uno nuevo, presione el botón Add Domains. 
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En el cuadro que se muestra, vaya agregando los dominios que registró, uno 


a uno separados por un salto de línea. Presione el botón Add para comenzar 
el proceso de adición. 
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» 


a Se mostrará una página de proceso de la redirección. Debe esperar a que ter- 


mine el proceso para que se presente la nueva pantalla. 


El Al finalizar, se presenta una página que avisa que el dominio ha sido agregado 
satisfactoriamente. Para incorporar el servicio de redirección al dominio nuevo, 


presione Add Services. 
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6 A continuación verá una lista con todos los servicios adicionales disponibles. El de 
redirección es agregado de forma predeterminada. Presione el botón Continue. 
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» 


Marque la casilla Registration Agreement, indique una dirección de e-mail váli- 
da y presione el botón Complete Order. 
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EJ Espere unos segundos hasta que se complete el procesamiento del trámite. 


EZ Se le avisará que su orden fue completada adecuadamente. Presione el bo- 
tón Continue para proseguir. 
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E] Para volver a su lista de dominios, presione el botón Goto My Account. 
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Como último paso, tenemos que aplicar al dominio registrado la dirección de nues- 
tro servidor web para que, al indicar el nombre de dominio desde un ámbito de In- 
ternet externo, se pueda acceder al sitio local mediante nuestro servidor web (ISS o 
Apache) y la redirección de dominios por parte de No-IP y MyDomain.com. 

Para poder lograr esto, debemos configurar el servicio de redireccionamiento del 
nombre de dominio. Recordemos que, por un lado, tenemos en nuestro equipo 
el sitio instalado en el servidor ISS y la redirección estática de No-IP asigna- 
da al mismo pero, por otro lado, tenemos el dominio regional registrado y la 
redirección aplicada al mismo. 

Sólo resta vincular ambos paquetes de procesos para que, al poner el nombre de 
dominio registrado en el navegador (www.toaddesign.com.ar, en este caso), po- 
damos acceder al sitio. Para esto, tenemos que indicar en el servicio de redirec- 
ción de la empresa (MyDomain.com) la ruta de acceso a nuestro servidor web, 
es decir, el alias de No-IP. 

Indicando simplemente el alias de No-IP, accederemos a la ruta raíz de nuestro 
servidor. Por ejemplo, en nuestro caso, si indicamos en MyDomain.com la di- 
rección http://toaddesing.no-ip.org, accederemos a la página inicial del sitio 
configurado en la carpeta raíz del servidor. 

Pero supongamos que en la carpeta raíz del servidor creamos una carpeta para cada 
sitio diferente. Para que al nombre del dominio regional se le asocie la carpeta co- 
rrecta del sitio, debemos especificarla en su totalidad. Entonces, supongamos que 
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para el sitio Toad Design creamos una carpeta dentro del directorio raíz del servi- 
dor denominada Toad. En el servicio de redirección del dominio www.toaddesign. 
com.ar tendremos que indicar la ruta hacia esa carpeta, por lo tanto, el valor que 
debemos especificar será http://toaddesign.no-ip.org/Toad. Así tendríamos que 
hacer con cada redirección de dominio que hayamos agregado, siempre dando por 
descontado que nuestro servidor web resuelve por defecto las páginas de inicio 
(index, default, main, etc., y su correspondiente extensión). Si esto no fuera así, 
también tendríamos que indicar en la redirección la página inicial, por ejemplo, 
http://toaddesign.no-ip.org/Toad/index.htm. Veamos ahora cómo configurar 
una redirección estándar al servidor web local en MyDomain.com. 


E Redireccionar dominios PASO A PASO 





E Diríjase a la categoría My Services. 
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» 


> DESCARGAR FUENTES 


Instalar fuentes en nuestro sistema es una gran ventaja para personalizar nuestras páginas e imá- 
genes. Existen muchos sitios desde donde podremos descargar gratuitamente muchas variantes de 
fuentes tipográficas para darles a nuestros sitios un aspecto mucho más atractivo. Algunos ejem- 
plos son www.fontreactor.com, http://recursosgratis.com o www.letramania.com. 
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[Aal En el dominio correspondiente, presione el botón Manage Services 
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[E En el primer formulario podrá indicar la dirección o, en nuestro caso, el alias del 
servidor web. Para aplicar los cambios, presione Update. 
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4 Se le avisará que el trámite se completó correctamente 


. Para que los cambios 
tengan efecto, debe esperar por lo menos una hora. 
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EL ALOJAMIENTO (HOSTING) 


El hosting u hospedaje web (también llamado alojamiento web) es un servicio 
que facilitan algunas empresas e ISP (proveedores de Internet). Este servicio con- 
siste, básicamente, en ofrecer a los clientes determinado espacio en un servidor 
web para hospedar sus sitios y publicarlos en Internet. 

La estructura coincide casi totalmente con un servidor web propio, pero instala- 
do físicamente en otro lugar. Otra gran diferencia es que nos pueden brindar an- 
chos de banda mucho más altos y sin tantas redirecciones, ya que el servicio 
es pago, y debido a esto podremos contar con servidores DNS y registro de di- 
ferentes dominios no regionales (.com, .net, .org, .edu, etc.). 

Por lo general, junto con el servicio de hosting se ofrecen otros adicionales como 
cuentas de correo, acceso FTP, publicidad, inclusión en buscadores, diseño web, chat, 
antivirus, webmail, etc. Conozcamos las principales categorías de los tipos de hosting. 


Hosting compartido 

En este tipo de servicio, el servidor se dividirá en varios dominios virtuales en los 
que se colocarán los sitios de los distintos clientes. Dentro de sus ventajas, podemos 
destacar su bajo costo y el hecho de que no tendremos que estar pendientes perma- 
nentemente de su mantenimiento. En cambio, tiene en contra el hecho de que pode- 
mos encontrarnos con posibles problemas de desempeño y seguridad muy baja. Algu- 
nos ejemplos son empresas como www.ibericahosting.com y www.capside.com. 


Hosting dedicado 

Este tipo de hospedaje está dedicado a sitios más complejos y robustos. A medi- 
da que un sitio crece, necesitará más recursos en su servidor (ancho de banda, 
extensiones de aplicaciones, espacio en disco, etc.) para poder brindar los servi- 
cios adecuados. De esta manera, se dificulta que un solo servidor pueda albergar 
eran cantidad de estos sitios. Para esto se creó el alojamiento dedicado, que con- 
siste en un equipo exclusivo para el sitio del cliente. Las ventajas que posee 


mm RESELLERS 


Dentro del mundo del alojamiento web existe un término que identifica a una modalidad de hosting: 
los resellers. Este tipo de compañías lo particulares) suelen dedicarse a la reventa de espacio en 
Internet y servicios de hospedaje, sacando asi un porcentaje de ganancia. Contratan una cantidad de 
planes y servicios a una empresa proveedora de hosting y los revenden a terceros. 
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esta clase de hosting es que provee al cliente un mayor control en el manteni- 
miento y la seguridad de sus sitios, además de una gran mejora en la calidad de 
las conexiones y el ancho de banda. La desventaja: su precio es más alto. Dos 
buenos ejemplos son www.towebs.com y www.dattatec.com. 


Housing 

Es el servicio de más calidad. En este caso, el servidor será armado, implemen- 
tado, instalado, configurado y mantenido por nosotros, aunque reside en 
otro lugar físico provisto por la empresa de housing. En este tipo de sistema po- 
dremos seleccionar el ancho de banda con el que deseamos contar mediante un 
canal limpio de Internet. Una desventaja puede ser que al tener que ser mante- 
nido por nosotros, tendremos que ser expertos en seguridad informática para no 
correr riesgos, o contratar personal idóneo para esa tarea. Las ventajas están cla- 
ras: mayor personalización y control, accesibilidad total y un respaldo de ener- 
gía. Otro inconveniente es el aumento en los costos de mantenimiento, softwa- 
re y servidor. Ejemplos: www.elserver.com y www.wnpower.com. 


Veamos cómo contratar un servicio de housing con elserver.com. 





E Servicio de hosting estándar AO AO 


E Primero debe seleccionar el tipo de cliente que es. 
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2 Luego de un buen análisis de la relación entre costo y calidad, elija el plan que 
más convenga a sus necesidades. Presione Contratar. 


E] A A A 
Anbo Dain Wa Pirbrños — Hiersisrta Poda 


ELIT E) 


E häly Mera phar eer ton feirar ieghja 


EI 


Praos f ameda ES 


a] i h na 


a TO Hb; Tobes de armáil, E Gb dë traistererncia 


Mrotissge 


s 250 Hb, EDoctas de eznail 


Z CEdo tránstareccia 


Antiviras, CO1-DIN prágs, Rediracciónador de Demi. 


kz de 


w ppi Mb, Ciemas de empl ilimitada, E-G5 qe 
tricaberenta, ARNEDO, Ana, Redee icon dira de 


Driu, Pp 





Confirme la selección del plan luego de compararlo en precio, prestaciones y en 
clasificación con los otros disponibles. 


ES Acepte los términos de licencia de la empresa para contratar uno de sus servicios. 
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[5] Ingrese el nombre de dominio de su sitio y el tipo de administración que de- 


sea aplicarle. Presione Continuar. 


MAT A A 
Ardo Dicón Va Pivartos — Hemrareortis Apija 


(Ss + EY a 2] y + gua + Precios: A rta E) 
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rad 
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6 Ingrese todos los datos personales que se le solicitan. 





Realice la comprobación de los datos y, si todo es correcto, contrate el servicio 


mediante el botón Contratar. 
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E Se le darán las gracias y se le informará acerca de los métodos para empe- 
zar a administrar su sitio. 


EA Unos minutos después recibirá en su casilla un mensaje de correo de la empre- 
sa. Desde este mensaje podrá acceder a todos los datos de su cuenta. 


RENE entrada - Microsoft Ciiidopk 

thia Ed Ya l prisas As 1 

ed lO A ERRE ADAN oor A Ca 
Correo Bandeja de entrada Ji 
Ce 
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+ Servicio 


+ Administración 


























+ Contacto 


información de la cuenta 
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ES RESUMEN 


En este capítulo abarcamos todo lo relacionado con la creación, implementación o contra- 
tación de servidores para el almacenamiento de nuestros sitios web. Repasamos concep- 
tos como protocolos, DNS, servicios, extensiones de aplicación, hosting, housing y redirec- 
ciones; y también evaluamos aplicaciones como IIS o Apache. Todo esto en función de en- 
tender y poder desarrollar un servicio de páginas para clientes y usuarios en general. A 
partir del próximo capítulo, volveremos al área del diseño. 
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TEST DE AUTOEVALUACIÓN 


1 ¿Qué función básica cumple TCP? 


N 


¿Cuántas capas componen el modelo de 
estratificación del protocolo TCP/IP? Enu- 


mérelas y explique la función de cada una. 


3 ¿Qué diferencias hay entre los protocolos 
UDP y TCP? 


4 Para qué sirve el comando PING? 


Explique el proceso de resolución de nom- 


bres: 


6 Defina las diferentes formas de probar 


nuestros servidores web. 


7 ¿En qué carpeta predeterminada instala IS 


nuestro sitio? ¿Y Apache Server? 


8 Enumere los servicios que inicia IIS en 


Windows y los que inicia Apache. 
9 ¿Qué archivo nos permite configurar nues- 
tro Apache Server? Explique tres de sus di- 


rectivas. 


10Explique las diferencias entre los diferen- 


tes tipos de hosting. 
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v ACTIVIDADES 


EJERCICIOS PRÁCTICOS 


Y Averigue en Internet la totalidad de los 


protocolos que componen a TCP/IP. 


Y Sitiene conexión a Internet, abra el símbo- 
lo del sistema y compruebe el funciona- 
miento de los comandos PING y NETSTAT. 


Y Instale IIS en su equipo y proceda con al 


configuración inicial de su sitio principal. 


Y Realice todos los procedimientos de regis- 
tro y redirección de un dominio. Comprue- 


be el funcionamiento en cada paso. 


Y Ingrese en los sitios que proveen servicio 


de hosting y evalúe sus planes. 
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Macromedia 
Flash y otras 
herramientas 


En este capitulo conoceremos otros 





elementos y funciones adicionales 
para incorporar dentro de nuestras 
paginas web. Además de texto, 
imágenes y animaciones simples, 
también podremos insertar elementos 
multimedia, complejas herramientas 
y entretenidas aplicaciones a través 
de diversos formatos, como Flash, 


ActionScript, ASP, PHP, Java o JavaScript. 


SERVICIO DE ATENCIÓN AL LECTOR: lectoresQmpediciones.com 


Macromedia Flash 8 
Professional 

Flash Player 

Instalar Flash 

Iniciar Flash 8 

El escenario 

Las líneas de tiempo 

Los paneles 

La barra de herramientas 

Tareas básicas de diseño 
Aplicaciones mediante scripts 

ASP 

PHP 

Java y Javascript 
Resumen 
Actividades 
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MACROMEDIA FLASH 8 PROFESSIONAL 


Macromedia Flash es una útil herramienta diseñada originalmente para la creación 
de animaciones con estructuras vectoriales para utilizar en las páginas web. Ac- 
tualmente, con la demanda y necesidad de dinamismo e interactividad con los 
usuarios por parte de los diseñadores y programadores, Flash incorpora notables 
funcionalidades que nos permitirán crear desde simples animaciones hasta comple- 
jas aplicaciones para el entorno web. En todos los casos podremos enriquecer 
nuestros proyectos en Flash con la incorporación de imágenes, sonido y video. 

A pesar de que Flash cuenta con una gran cantidad de funciones y opciones, no 
pierde la facilidad y agilidad en la metodología de utilización de sus herramientas. 
Flash se apoya en la animación e interactividad de los componentes en base a lí- 
neas de tiempo que se dividen en fotogramas. Éstas, a su vez, se clasifican dentro 
de capas (que manejarán la prioridad de visualización e interacción de los objetos). 
Las capas a su vez conforman las escenas de los documentos de Flash. 

Otra característica muy importante a la hora de usar Macromedia Flash es la po- 
sibilidad de incorporar acciones y métodos a nuestros elementos mediante un 
lenguaje de programación propio: ActionScript. Podremos desarrollar comple- 
tos formularios, barras de navegación sumamente funcionales, atractivos visores 
de imágenes y muchas aplicaciones más con sólo aplicar código en este lenguaje 
a los objetos interactivos que diseñemos. Lo gratificante de ActionScript es que 
no es necesario ser un experto en él, ya que podremos insertar sus directivas a 
través de un útil y autoexplicativo panel. 

Cuando trabajemos en Flash, estaremos trabajando dentro de un documento de ori- 
gen, que será el que nos permite editar los contenidos de nuestro trabajo. Estos ar- 
chivos llevan extensión FLA y sólo son para editar, por lo que no podemos reprodu- 
cirlos ni ver su estado final. Para conseguir esto, el programa generará un tipo de ar- 
chivos que interpreta lo desarrollado en el FLA. Estos archivos son ejecutables y, en la 
mayoría de los casos, es el formato que podremos incluir en nuestras páginas para la 
incorporación y visualización del documento. Poseen el formato SWF, un formato 
especial para Macromedia Flash dedicado a que los contenidos sean interpretados por 
el sistema y, en especial, por los clientes web (navegadores). Para esto hará falta que la 


o REQUISITOS DEL SISTEMA 


Para instalar y utilizar Macromedia Flash 8 Professional, debemos contar con un sistema 
operativo Windows de 32 bits. En cuanto a componentes físicos (hardware), necesitamos co- 
mo mínimo una PC con procesador Intel Pentium Ill de 600 MHz o equivalente, 128 MB de 
RAM y 200 MB de espacio disponible en nuestro disco duro. 
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máquina cliente, es decir, la que accede a la página que contiene este tipo de forma- 
to, tenga instalado un plugin especial, llamado Flash Player (reproductor Flash). 


Flash Player 

La versión Macromedia Flash Professional 8 incluye el reproductor e intérprete 
de contenidos SWE, el Flash Player 8. Veremos que cuando instalemos Flash, se 
nos preguntará si también deseamos instalar este reproductor. Flash Player ga- 
rantiza que todos los contenidos de Flash puedan visualizarse en cualquier pla- 
taforma, navegador o dispositivo. Además, Flash Player, al ser un plugin, pue- 
de ser obtenido de forma gratuita por cualquier persona que quiera utilizarlo. Lo 
podemos descargar desde www.macromedia.com/go/getflashplayer_es/. 


Instalar Flash 

La instalación de Macromedia Flash es, al igual que con los anteriores programas 
analizados, un proceso totalmente automatizado. Bastará con recorrer algunos 
pasos y configurar un par de factores para que el programa quede instalado en 
nuestro equipo. También, al igual que con Dreamweaver y Fireworks, Flash re- 
quiere un código de activación para usar el producto de forma ilimitada (la ver- 
sión que podemos descargar es una prueba de 30 días). 


AR AAA 


Bienvenidos a Macromedia Flash 


O Dispongo de un número de serie y deseo activar 
Macromedia Flash. 
Presione el botón Continuar para comenzar. 


O bien presione el botón Comprar para comprar Macromedia Flash en línea 
y obtener un número de serie, 


Acerca de la activación 


La activación, que es Comprar 


completamente anónima, 


verifica la licencia de un i 
bakip app © Deseo probar Macromedia Flash. 


solicita ningún dato personal. (quedan 30 días) 

Sino desea activar Macromedia 

Flash ahora, ejecútelo en modo Al final del período de prueba, deberá activar Macromedia Flash para 
de prueba. Podrá activarlo en seguir utilizándolo. 

cualquier momento del período 

de prueba. 


Haga clic en los vínculos 
incluidos a continuación para 
obtener ayuda o consultar la 
política de privacidad de 
Macromedia. 


2 Ayuda de activación 


en Política de confidencialidad 





Figura 1. Al ejecutarlo por primera vez, tenemos que decidir si Macromedia Flash 
se instalará como versión de prueba o si compraremos el producto en ese momento. 


El proceso de activación se iniciará entre la instalación y la ejecución del progra- 
ma, es decir que cuando iniciemos el programa se nos presentarán las opciones 
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para activar Flash. Podemos obtener este código a través de Internet o por telé- 
fono. Una vez que tengamos el número de serie correspondiente para la activa- 
ción de Flash, procedemos con la instalación. 


E La instalación PASO A PASO 





E Ejecute el programa de instalación de Macromedia Flash 8 (el programa des- 
cargado se llama Flash8-es.exe). 


A Se extraerán los contenidos del instalador y se le dará la bienvenida al asisten- 
te. Haga clic en Siguiente para comenzar. 


Seleccione Acepto los términos del contrato de licencia para aceptar el contra- 
to y haga clic en Siguiente para continuar. 


A IA E 


Contrato de licencia as macromedia 


Lea cuidadosamente el acuerdo de licencia siguiente. 


CONTRATO DE LICENCIA, PARA USUARIOS FINALES DE SOFTWARE 
MACROMEDIAE 


IMPORTANTE: PUEDE QUE TENGA QUE DESPLAZARSE HASTA EL 
FINAL DE ESTE CONTRATO PARA PODER ACEPTARLO Y CONTINUAR 
CON LA INSTALACION DEL SOPTWARE. 


IMPORTANTE: ESTE CONTRATO {o "EULA" CONSTITUYE UN ACUERDO 
LEGAL ENTRE LS, PERSONA, COMPANIA U ORGANIZACION QUE HAYA 
CONCEDIDO LA, LICENCIA DE ESTE SOFTWARE PUSTED” O EL 


"MIENTE" % MAA COnbACMILA AlL IMETA AD W ITHE ZAO EI CAET A DOE 


F Imprimir | 


m 


<= Atrás Cancelar | 





» 


nm OBTENER FLASH 8 


Para poder obtener una copia legal de Macromedia Flash 8 Professional, hay que adquirirlo. Desde 
el sitio oficial de Adobe Macromedia, podremos comprar Flash o descargar una versión de prueba 
de 30 días, que podemos adquirir comercialmente después. Para descargar la versión Trial de Flash 
8, debemos ir a www.adobe.com/cfusion/tdrc/index.cfm?loc=es%5Fesg8:product=flashpro. 
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a Seleccione la carpeta de su disco donde se instalará el programa y los accesos 
directos que se crearán. 


Ea ARA SINN A 


- PAI a 2 
Carpeta de destino (RAY Macrom edia 


Haga clic en Siguiente para instalar en esta carpeta o en Cambiar para instalar en una 
carpeta diferente. 


d oa  InstalarMacromedia Flash 8 en: 


JJ G: Archivos de programalMacromedialFlash 81 Cambiar... | 


Elija los métodos abreviados que se van a crear 


| Crear método abreviado en la barra Inicio rápido 


| Crear método abreviado en el escritorio 


< Atrás ; Sigui j Cancelar | 





El Marque la casilla Instalar Macromedia Flash Player para instalar también el re- 
productor. Presione Siguiente. 


ig ARA SAI A AE 


Instalar Macromedia Flash Player (AA, macromedia 


Este programa de instalación puede instalar automáticamente Macromedia Flash Player. 


< Atrás Cancelar | 





6 Se le notificará que la instalación está lista para ejecutarse. Proceda presio- 
nando el botón Instalar. 


Aguarde a que se desarrollen completamente todos los procesos de la instala- 
ción (copia de archivos, registro de componentes, etc.). 


» 
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B] Para terminar con la instalación, presione Finalizar. 


1 Macromedia Flash 8 - InstallShield Wizard 


Finalizado Macromedia Flash 8 - InstallShield 
Wizard 


InstallShield Wizard ha instalado Macromedia Flash 8 
correctamente. Haga clic en Finalizar para salir del asistente. 


Mostrar archivo Léame 





Cancelar 





Iniciar Flash 8 

Una vez que tengamos instalado y activado Macromedia Flash 8, sólo resta eje- 
cutarlo y comenzar a inspeccionar y aprovechar todas sus funciones. Para poder 
acceder al programa, debemos recurrir a nuestro menú Inicio de Windows. Allí 
seleccionamos la opción Todos los programas/Macromedia/Macromedia Flash 8. 
Una vez que hagamos esto, se cargará el programa a través de la Splash Screen, 
y finalmente Flash estará iniciado en nuestro equipo. 





Figura 2. Cuando iniciamos Flash por el período de prueba por primera vez, 
tenemos que decidir si queremos utilizar la versión Basic o la Professional. 
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Veremos que se nos presenta el espacio de trabajo del programa (que luego analiza- 
remos en profundidad), en el que hay una pantalla que nos ofrece diversas opciones 
comunes, como abrir un elemento reciente, la creación de nuevos documentos o ge- 
nerarlos a partir de plantillas. Se trata de un panel similar a los que se nos presenta- 
ron la primera vez que iniciamos Macromedia Dreamweaver o Macromedia Fire- 
works. Podemos desactivar su aparición de la misma manera que con estos últimos. 


F iacromedia Elan to redes iamal E 


F FLASH Professional 


der e ere O PELA Crema ito 
Abro Al Documento de Fam 
a Prevantación de flash 
a en lero Penh 
ad der dro 
al oca aiport 
Ea E Flaiñ 1 Pregartaticaó ón de legal 
A hopas Pain a Pabe 
DJ hia 
Amplis 


E hac precia Pics Parana 


A + Poo rápodó A FLA Spee el miden partida a vis 
¿eel + Coraoca don TELUTA ds Ff prehia = 
GATI N Wabe ba a de medn paa arata b 


= Ese inmenin aiizria kra Bhor y ERA p e p E 
Èy mtori 


hip wakas 1 More 2100 pre 





Figura 3. Mediante la pantalla de bienvenida podremos acceder 
a las opciones más frecuentes para el manejo de nuestros documentos. 


El espacio de trabajo de Flash 8 

Antes de empezar a analizar las funciones y herramientas más importantes de es- 
te valioso programa, debemos conocer los elementos con los que contamos en el 
espacio de trabajo para poder llevar a cabo esas operaciones. Será fundamental 
prestar mucha atención en este tramo del capítulo, ya que a partir de aquí co- 
menzaremos a intentar comprender la forma de funcionamiento de Flash. 

El espacio de trabajo de Macromedia Flash se compone de un Escenario donde inclui- 
remos todos los objetos multimedia, es decir, una especie de hoja de trabajo donde edi- 
taremos los objetos y sus propiedades. También encontramos una barra de herramien- 
tas principal con determinados menús y comandos que controlarán y administrán las 
tareas de cada elemento y de la aplicación en general. También contamos con una se- 
rie de paneles (al igual que en Dreamweaver y Fireworks) encargados de brindarnos un 
acceso mucho más rápido a las funciones del programa, además de permitirnos orga- 
nizar nuestros elementos multimedia. Dentro de estos paneles podemos destacar el 
Inspector de propiedades y el Panel de acciones. El primero, al igual que en las otras apli- 
caciones de Macromedia, nos da acceso a diferentes opciones de personalización de los 
objetos. El Panel de acciones estará a cargo de la programación en ActionScript. 
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El área de trabajo GUÍA VISUAL 1 


AE SN 


Tamaños [250% 400 púceles | Ferdos O. Velocdadde fefogramas; (12 | ft 
Publicar: |. Configuración... [ñecroductor: 0 tooo Fei Predeterminado 


Disposito! Corrió. | 





© Barra de menús. O Edición de objetos. 

O Barra de herramientas principal. O Zoom. 

9 Capas. © Escenario. 

O Controles para capas. 0 Panel de acciones. 

© Nombre de la escena. O Inspector de propiedades. 
O Línea de tiempo. (B Paneles adicionales. 


O Edición de escenas. 


El escenario 

Como ya dijimos, el escenario de un documento Flash es el área rectangular don- 
de incluiremos los contenidos visuales, como gráficos vectoriales, cuadros de 
texto, botones, clips de video, imágenes mapa de bits, etc. 

Esta zona representa el espacio en donde se visualizarán los contenidos interacti- 
vos en Flash Player durante la reproducción. En el escenario manejaremos todos 
los objetos que se incluirán en el fotograma seleccionado en la línea de tiempo. 
Hay tres tipos de objetos que se pueden incluir. Los objetos en Flash son deno- 
minados símbolos, y existen tres tipos de símbolos que se pueden agregar en el 
escenario del fotograma: imágenes, clips de película y botones. Para poder 
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agregar y administrar nuestros símbolos, contamos con el panel Biblioteca. Para 
agregar un objeto desde este panel al escenario, simplemente lo seleccionamos 
del listado y, manteniendo el botón del mouse presionado, lo arrastramos hasta 
la ubicación deseada. Analicemos ahora los componentes de este panel para 
aprender a administrar nuestros símbolos. 


El panel Biblioteca GUÍA VISUAL 2 


H Biblioteca - INTRO =— QO 
O — mro v] a g 


23 elementos 

















Latch Thick. 

Mapa de bits 1 

Mapa de bits 3 

Mapa de bits 5 
Objetos de Fireworks 
Plastic Button 


i Simbolo 1 


=| Simbolo 1 copia 
S| Simbolo 5 
=| Simbolo 10 





© Agregar un símbolo a la biblioteca. 

O Listado de símbolos de la biblioteca. 

O Previsualización del símbolo seleccionado. 

O Nombre de la película cuya biblioteca se visualiza (útil cuando se trabaja con 
muchas películas al mismo tiempo). 

© Menú de opciones de la biblioteca. 

© Controles de previsualización. 

O Permite ordenar los símbolos alfabéticamente. 

O Eliminar el símbolo seleccionado. 

O Permite ver información sobre el símbolo seleccionado. 

© Agregar una carpeta para almacenar símbolos. 


USERS 219 


CREACIÓN DE SITIOS WEB 


Las lineas de tiempo 

Las líneas de tiempo organizan el contenido del documento en fotogramas y 
capas, y también establecen su orden de reproducción. 

Dentro de un documento de Flash, y al igual que en la mayoría de los editores 
de video, el tiempo se divide en fotogramas. Estos son cada instancia de tiem- 
po consecutiva dentro del documento. 

Las capas, en cambio, representan varias bandas de la película y establecerán el 
orden de visualización de los símbolos, aplicando unas sobre otras. Las capas 
de un documento se presentan en el panel ubicado a la izquierda de las líneas de 
tiempo, y mediante él también podremos insertar nuevas capas y eliminar 
existentes, como también adjuntarle a la seleccionada una guía de movimien- 
to. También notaremos algunas opciones junto al nombre de la capa. Ellas nos 
permiten mostrar u ocultar los contenidos de determinada capa, bloquear o 
desbloquear su edición o visualizarlas en modo de contornos. 

Cada capa posee una línea de tiempo que la corresponde, por lo que podremos 
insertar diferentes símbolos en diferentes capas y manejar su animación indivi- 
dualmente a través de los fotogramas de cada línea de tiempo. 

Respecto al trabajo con fotogramas, todas las tareas necesarias las encontramos ha- 
ciendo clic derecho sobre el fotograma que deseamos modificar. Podremos agre- 
gar y eliminar fotogramas, borrar sus contenidos o convertirlos en fotogramas cla- 
ve. Los fotogramas clave son aquellos que son capaces de comenzar una animación 
o interpolación de movimiento, es decir, los fotogramas que marcan los puntos de 
animación y reproducción principales dentro de la capa correspondiente. 


Los fotogramas clave 

Para ser más específicos respecto a los fotogramas clave de una línea de tiempo, 
podemos decir que sus funciones son determinar un cambio en la animación 
o contener una acción de ActionScript. Se representan con un punto en el in- 
terior de su cuadro de la línea de tiempo. 

El orden en que se muestran los fotogramas y los fotogramas clave en una línea 
de tiempo implica su secuencia en la reproducción. Es por eso que conviene or- 
ganizarlos en función de la secuencia de eventos en la animación. Recordemos 


o LOS BOTONES 


En el caso particular de la edición de los botones, también contaremos con las referencias de 
capas, líneas de tiempo y fotogramas. Sólo que en este caso, tendremos un limite de fotogra- 
mas establecido en función de los tres estados de un botón (normal, con el mouse encima y 
presionado) y de su zona activa. 
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que todas las opciones para el manejo de fotogramas (insertar, eliminar, inser- 
tar fotogramas clave, insertar fotogramas clave en blanco, borrar el contenido de 


un fotograma, copiar, cortar y pegar fotogramas, etc.) se pueden encontrar ha- 
ciendo clic derecho sobre el fotograma deseado en la línea de tiempo. 


P Macromedia Flash Professional 8 - [INTRO"] 
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Figura 4. Podemos administrar las opciones de un fotograma 
simplemente haciendo clic derecho sobre él en la línea de tiempo. 


Las capas 


Para entender el funcionamiento de las capas en Flash, podemos llevar su definición al 
área del diseño gráfico. Podemos decir que las capas son como hojas de papel de cal- 
car apiladas sobre una hoja de papel blanco, donde en cada hoja es posible represen- 
tar un elemento diferente. Es así que las capas cumplen la función de organizar los ele- 
mentos de un documento y su prioridad de visualización. Para representar las instan- 
cias dentro de cada capa, como ya aclaramos, contamos con su línea de tiempo corres- 
pondiente dividida en fotogramas. También podemos organizar las capas dentro de 
carpetas, para clasificar mejor cada instancia de nuestra animación o aplicación. 


oi LA INTERPOLACIÓN DE MOVIMIENTO 


Este proceso se aplica entre dos fotogramas clave y desarrolla un efecto de transformación auto- 
mático a los objetos en común que ambos contengan. Por ejemplo, si en el fotograma clave 1 inclui- 
mos un círculo, y agregamos un fotograma clave en el fotograma 5 con el mismo símbolo pero re- 


ducido en su tamaño, en los fotogramas intermedios se representará la reducción de tamaño. 
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Los paneles 


Para potenciar o simplificar nuestro espacio de trabajo, Flash ofrece algunos pane- 
les que incorporarán muchas opciones útiles y de más rápido acceso, sin tener la ne- 
cesidad de recurrir a la clásica y tediosa barra de menús. 

Los diversos paneles se ubican en los márgenes del espacio de trabajo. Flash incor- 
pora de forma predeterminada los cuatro paneles más importantes (Acciones, Ins- 
pector de propiedades, Biblioteca y Color), pero si deseamos incorporar paneles adi- 
cionales, podemos hacerlo yendo al menú Ventana, donde aparecerán todos los pa- 
neles que tiene disponibles. 

Podremos plegar y desplegar el contenido de un panel sencillamente haciendo clic 
sobre su título. También podemos mover un panel de lugar en la ventana, para lo 
que tendremos que seleccionarlo y, con el botón izquierdo del mouse presionado, 
arrastrarlo hacia el margen deseado. 
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Figura 5. Podemos organizar nuestros paneles 
colocando cada uno en el costado que nos resulte más práctico. 


mm INCORPORAR SÍMBOLOS 


Al presionar el botón correspondiente para agregar símbolos a nuestra biblioteca del documen- 
to, primero nos aparecerá un cuadro donde debemos seleccionar el tipo de símbolo (película, 
gráfico o botón]. Luego pasaremos a la edición, que se realiza de forma individual y de la misma 
manera que trabajamos en el documento principal (líneas de tiempo, capas y fotogramas). 
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El Inspector de propiedades 

Como en todas las aplicaciones de Macromedia, el panel más importante y más 
utilizado será el Inspector de propiedades ya que, al seleccionar un símbolo (sea 
en el escenario o mediante la línea de tiempo), nos permitirá modificar la ma- 
yoría de sus propiedades generales. 

En Flash, el Inspector de propiedades se utiliza para todo tipo de objeto, pero 
modificará sus valores dependiendo de éste. 

Además de poder modificar los atributos de cualquier tipo de objeto (contornos, 
rellenos, textos, gráficos, mapa de bits, símbolos, sonidos, clips de video, un gru- 
po o el escenario mismo), a través de este panel podremos establecer las propie- 
dades básicas de algunas herramientas, sobre todo si manejan contornos y re- 
llenos, ya que se pueden modificar los colores desde aquí. 
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Figura 6. En este caso establecemos un sonido 
a un clip de película a través del Inspector de propiedades. 


El panel Acciones 

Mediante este panel podremos obtener una lista con la totalidad de las directi- 
vas de ActionScript para aplicar a un objeto o fotograma determinado. Por lo 
tanto, sus funciones estarán disponibles sólo si seleccionamos un fotograma, 
botón o clip de película. Para poder aplicar una acción a alguno de estos ele- 
mentos, simplemente debemos navegar por las categorías del panel izquierdo 
y seleccionar la que queremos establecer. Podemos configurar las opciones de la 
sentencia agregada del lado derecho del panel Acciones, pero para ello vamos a 
necesitar conocer un poco más acerca del lenguaje ActionScript. 
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Figura 7. Aquí vemos cómo agregar un enlace 
a un botón mediante el panel Acciones y ActionScript. 


La barra de herramientas 

Para poder crear todos los contenidos visuales basados en vectores, primero de- 
bemos conocer en detalle las herramientas de diseño y otras funciones que nos 
brinda Macromedia Flash 8. 

Todas estas herramientas y funciones están contenidas dentro de una barra ubi- 
cada en el margen izquierdo del espacio de trabajo en Flash. Esta barra es deno- 
minada barra de herramientas principal, y constituye el eje para la creación de 
eráficos vectoriales, botones, textos, etc. 

Recordemos que como cualquier otro programa de desarrollo de imágenes a tra- 
vés de vectores, los objetos que diseñemos se basarán en un contorno y un 
relleno, lo que significa que además de ocupar poco espacio en el disco, se los 
puede escalar en cualquier momento sin que pierdan calidad. 


nm COLORACIÓN DE OBJETOS 


El Inspector de propiedades ofrece una opción muy útil a la hora de aplicar efectos. Se trata del cam- 
po Color, que se muestra cuando seleccionamos un contenido gráfico (textos, imágenes, símbolos, 
etc.), y su función será permitirnos aplicar al objeto un efecto de coloración determinado. Contamos 
con varias opciones, entre las que encontramos Brillo, Tinta (contraste) y Alpha [transparencia]. 
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Barra de herramientas GUÍA VISUAL 3 


Herram. 


o— t g O tos con el puntero. 


© Subselección: permite seleccionar tro- 


AH 
O L 3—0 zos de los gráficos vectoriales. 


O Selección: permite seleccionar obje- 


O— r FS © Transformación libre: permite modifi- 
O car libremente las propiedades de for- 

O $ A ma de un objeto. 

0-0 0——0 O Transformación de relleno: permite 


De P y” D personalizar el relleno de los objetos 


creados por vectores. 


f © $ © O Línea: permite trazar líneas rectas. 
bt 2 — © Lazo: permite seleccionar trozos de ele- 


oi mentos a mano alzada. 
© y Q ®© O Pluma: permite trazar curvas. 
O Texto: permite representar cuadros de 
Salt texto editables. 


o AA] O Círculo: desarrolla formas circulares. 
© nocianguio: desarrolla formas rectan- 
gulares y polígonos. 
2l O Lápiz: permite dibujar a mano alzada. 


1 Pincel: permite representar rellenos a 
mano alzada. 

©® Bote de tinta: permite colorear contornos. 

(Cubo de pintura: permite colorear rellenos. 

(B Cuentagotas: permite absorber un co- 
lor para contornos y rellenos desde 
otro objeto. 

© Borrador: permite borrar contornos y rellenos a mano alzada. 

(DY Mano: si el documento no se visualiza completamente dentro del escenario, 
nos permite navegar a través de él. 

(B Zoom: permite alejar o acercar la visualización del escenario. 

© Color de trazo: establece el color del contorno. 

®© Color de relleno: establece el color del relleno. 

€ Control de color: permite invertir los colores de relleno y contorno, hacer trans- 
parente alguno de ellos o cambiarlos a blanco y negro. 

2 Opciones: permite configurar las opciones propias de cada herramienta una 
vez seleccionada ésta. 


Opciones 


A| 
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Tareas básicas de diseño 

En esta parte del capítulo veremos cómo comenzar a trabajar en Flash a través de la 
incorporación de los diferentes elementos multimedia y gráficos básicos. Comenza- 
remos por representar figuras geométricas en el escenario, establecer sus propie- 
dades de relleno y contorno, y convertirlas en símbolos, para luego poder modifi- 
carlas. Este ejemplo puede servir para cualquier tipo de ilustración vectorial que 
queramos realizar, ya sean gráficos individuales o secuencias de fotogramas. 





E Crear figuras vectoriales PASO A PASO 





E Seleccione la herramienta correspondiente para representar su figura, en es- 
te caso, Cuadrado. 
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A Diseñe la figura dentro del escenario. 


» 


oi FLASH PLAYER EN NUESTRO SERVIDOR 


Para que los usuarios puedan visualizar los contenidos de Flash [SWF] en sus equipos clientes, és- 
tos tienen que ser interpretados por su navegador, por lo que tendremos que configurar la exten- 
sión de aplicación en nuestro servidor web. Para incluir una extensión al servidor debemos especi- 
ficar el intérprete y la extensión, que en este caso serán application/x-shockwave-flash y .swf. 
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La figura será creada con el tamaño que usted determinó y con los colores 
predeterminados del programa. 


F Macromadia Flash Profersional Y - [Sin titalo-2*] 
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a] Modifique las formas de la figura a su gusto. Si acerca el mouse a las líneas de 
contorno, podrá modificarlas convirtiéndolas a curvas. 


» 
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6 Aplique un nuevo color al relleno si así lo desea mediante el Inspector de propie- 
dades. Puede realizar los pasos 5 y 6 también para los contornos de la figura. 
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Haga clic en el fotograma que contiene la figura para seleccionarla en su to- 


talidad. Luego haga clic con el botón derecho sobre la figura y seleccione la 
opción Convertir en símbolo.... 
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E Elija las propiedades del símbolo. Presione Aceptar para agregarlo a la biblioteca. 


» 
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10 Modifique el símbolo de acuerdo con sus necesidades. Puede cambiarle el 
tamaño, el color, la posición, etc. 


» 
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Como ya explicamos, en Macromedia Flash también podemos incluir, además 
de los elementos de texto y de imágenes vectoriales, elementos gráficos externos, 
como imágenes en formato de mapa de bits almacenadas como archivos en al- 
guna ubicación de nuestro disco. 

A este proceso se lo llama importación de contenidos y lo logramos yendo a 
Archivo/Importar/Importar a biblioteca.... 

En el caso que se propone a continuación, se toma como ejemplo justamente la 
importación de un mapa de bits, pero este proceso también nos servirá para im- 
portar a nuestra biblioteca otras clases de datos diferentes, por ejemplo, secuen- 
cias de video o formatos de audio digital. 





E importar datos a la biblioteca NAO AO 


e Diríjase a Archivo/Importar/Importar a biblioteca.... 
[2] Seleccione el archivo que desea importar y presione Abrir. 
El elemento aparecerá en la lista de objetos de la biblioteca. Para poder in- 


corporarlo a un fotograma, ubíquese en éste, seleccione el objeto y arrástre- 
lo hasta el escenario sin soltar el botón del mouse. 


[> 
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Otro factor importante dentro de Flash, sobre todo para aplicar funciones a 
nuestros sitios web, es la posibilidad de incorporar cuadros de texto, ya sean di- 
námicos (utilizados para formularios y aplicaciones) o estáticos (sólo pueden ser 
visualizados, es decir, no interactúan con el usuario). Veamos entonces cómo es 
el procedimiento para aplicar textos a nuestros documentos. 
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E La herramienta texto PASO A PASO 





ES Seleccione la herramienta Texto de la barra de herramientas principal. 
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[a] Delimite el tamaño del cuadro de texto en el lugar deseado del escenario. Esto 
se realiza presionando y arrastrando el puntero del mouse. 
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Cuando suelte el botón del mouse, quedará delimitado el cuadro de texto. 


» 
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ES Redacte el texto que desea incluir. 
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5 Para terminar, presione fuera del cuadro de texto. Puede modificar las caracte- 
rísticas visuales del texto mediante el Inspector de propiedades. 
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6 Es recomendable que, al igual que con los demás elementos, convierta al texto 
en un símbolo gráfico. Haga clic con el botón derecho sobre el cuadro de texto 
y seleccione la opción Convertir en símbolo.... 
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Anteriormente, hemos mencionado un concepto característico de este programa, 
que nos facilitará mucho las tareas si hablamos de animación: la interpolación 
de elementos para desarrollar movimiento. Esta opción se aplicará sólo a sím- 
bolos, es decir, los objetos que se utilicen para realizar esta animación tienen que 
estar agregados a la biblioteca previamente. La interpolación es una de las fun- 
ciones mas utilizadas en Flash, ya que permite crear animaciones de forma sen- 
cilla y rápida, sin tener que hacerlo cuadro por cuadro. 

Una vez que creamos la animación, es posible configurar sus propiedades para 
sincronizarla con un sonido. Á pesar de que aquí sólo veremos cómo mover un 
objeto, podemos utilizar la interpolación para hacer que los objetos además, se 
desvanezcan de la pantalla (cambiando la propiedad Alpha a valor 0% en el ob- 
jeto del fotograma final), que se agranden o achiquen (modificando el tamaño 
del objeto en el último fotograma de la animación, etc.). 

Ahora veamos cómo incluir una interpolación en nuestros fotogramas clave. 


AS EAN 54 Ko, ASOMO 


m Cree el objeto que desea animar en el fotograma que quiera sea el de inicio de 
la animación. Recuerde que debe ser un fotograma clave. 
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B] Haga clic derecho sobre el fotograma que desea utilizar como final en la anima- 
ción y seleccione la opción Insertar fotograma clave. Verá que en ese lugar se 
incluirá un fotograma clave idéntico al inicial. 
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En el fotograma final, modifique la forma o la ubicación del objeto que quiere ani- 
mar hasta lograr el estado final. 
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4 Vuelva a situarse en el fotograma de inicio y haga clic sobre él con el botón de- 
recho. Allí seleccione la opción Crear interpolación de movimiento. 
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6 Si el objeto que había utilizado para crear la animación aún no se había conver- 
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tido a símbolo, verá que se ha incluido en la biblioteca en forma de símbolos: 
uno inicial y uno final (para evitar esta duplicación, conviene realizar la interpo- 
lación con un objeto que ya sea símbolo). 
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Hemos llegado al final de este práctico recorrido por las tareas básicas de Flash. 
Suponemos que está de más aclarar que para almacenar los documentos en nues- 
tro disco debemos recurrir al menú Archivo/Guardar, o para abrir uno ya alma- 
cenado, al menú Archivo/Abrir. 

De este procedimiento de guardado podemos desprender una duda: si al guardar 
el documento de esta manera estamos almacenando el archivo base editable, es 
decir, en formato FLA, ¿cómo hacemos para generar el SWF para reproducir o 
incluir en nuestros sitios? La respuesta es muy sencilla. Primero tendremos que 
guardar cualquier cambio hecho en el documento, y luego, probar la reproduc- 
ción de la película dentro de Flash. A partir de esto, el programa generará auto- 
máticamente el archivo SWE y lo guardará con el mismo nombre que el edita- 
ble FLA (por supuesto, con la extensión SWF) y en la misma ubicación en la que 
éste está guardado. Para lograr todo esto, debemos hacer lo siguiente. 


oi EL PANEL COLOR 


En Macromedia Flash 8 también contamos con un panel adicional ubicado en el margen de- 
recho del espacio de trabajo denominado panel Color. Este panel será el que se encargue de 
darnos la posibilidad de personalizar la coloración de los componentes, ofreciéndonos la to- 
talidad de la paleta de colores para aplicar al relleno y a los trazos. 
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E Probar la película PASO A PASO 








ES Seleccione la opción Probar película del menú Control. 
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EJ Podrá observar que se abrirá una nueva ventana de Flash Player que repro- 
ducirá el documento. 
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APLICACIONES MEDIANTE SCRIPTS 


A continuación analizaremos algunos ejemplos, tanto prácticos como teóricos, acer- 
ca de las diferentes aplicaciones y funciones que nuestras páginas pueden contener, 
además de todo el contenido multimedia mencionado anteriormente. Los tres casos 
de ejemplos prácticos que brindamos en esta sección del libro se enfocan hacia un 
aspecto determinando del uso de la Web. Por ejemplo, la galería de imágenes que 
ofrecemos con ASP centraliza su funcionamiento en las páginas personales y en las 
sensaciones visuales que puede percibir el usuario. En el caso de la aplicación de chat 
en PHB se engloba el sentido de servicio a través del entretenimiento. Finalmente, 
con el juego desarrollado en JavaScript, agregamos al entretenimiento el concepto 
propio de diversión, combinándolo con una gran interactividad y simpleza. 


Los tres tipos de lenguaje son diferentes en cuanto a su codificación e implemen- 
tación (recordemos que para ASP y PHP necesitamos indicar en el servidor el in- 
térprete y la extensión de aplicación), pero siempre apuntamos a un mismo ob- 
jetivo: la aceptación y satisfacción del usuario o cliente final. 


ASP 


Si bien es común clasificar a ASP (Active Server Page) como un lenguaje de 
programación, esto no es demasiado real. ASP es más bien un marco sobre el que 
se desarrollan diversas aplicaciones destinadas a la relación servidor-cliente en 
Internet, más específicamente, en la World Wide Web. 

ASP se apoya básicamente en el lenguaje HTML, en la incorporación de lengua- 
jes de scripts como el VBScript y el JavaScript, y en la interrelación con bases de 
datos y la consulta SQL. 

ASP se basó en sus inicios en una serie de bibliotecas desarrolladas en las pri- 
meras versiones del servidor web ISS de Microsoft, por lo que podemos decir 
que su implementación en plataformas Windows será la más óptima, sobre to- 
do si contamos con ese tipo de servidor. Dentro de las características generales 
de ASP podemos destacar las siguientes: 


oi XML 


El XML (Extensible Markup Language) es otra variante de lenguaje de marcas. Proporciona un mé- 
todo para la aplicación de etiquetas (tags) que determinan los objetos y las funciones dentro del có- 
digo. Sus principales características son: flexibilidad, portabilidad, multiplataforma, simplicidad y 


velocidad. Las especificaciones de este formato se realizan en formatos comprimidos [schemal. 
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- Es gratuita, ya que se incorpora a PWS (Personal Web Server) e IIS de Windows. 

- Es posible fusionarla con otros lenguajes como HTML y diversos scripts, y tam- 
poco debe ser compilada por separado. 

- El código ASP es ejecutado por el servidor y no por el cliente, por lo que pue- 

de ser interpretado por cualquier navegador. 

Sus sentencias permiten llamar a otros lenguajes de programación y scripts. 

Es una de los métodos más veloces y seguros para el acceso a bases de datos. 


Es posible programarlo desde cualquier editor de textos, al igual que HTML o XML. 


Una galería de imágenes en ASP 

Ésta será una atractiva opción para sitios personales ya que este ASP generará una ga- 
lería de imágenes automáticamente desde una carpeta del sitio. El nombre del script 
es Free Image Gallery, y se trata de una única página ASP. Su característica más des- 
tacada, pese a ser un script tan simple, es que podemos asignar un comentario a cada 
imagen que se muestre en la galería a través de un simple archivo de texto. Podremos 
descargar Free [mage Gallery desde www.brinch.it/webgalleryv4/webgalleryv4.zip. 
Una vez que tengamos descargado este archivo comprimido, extraemos su con- 
tenido. Veremos que dentro de él existe una página ASP denominada default. 
asp. Para crear una galería, simplemente debemos copiar este archivo dentro de 
la carpeta del servidor que contenga las imágenes que deseamos indexar en la ga- 
lería. Luego, cuando accedamos a esa página mediante el navegador, las imáge- 
nes de la carpeta conformarán una atractiva galería de imágenes web. 
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Figura 8. Aquí vemos un ejemplo de galería creado mediante este práctico script. 
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En el caso que deseemos agregar un comentario a las imágenes, deberemos crear 
en la misma carpeta un archivo de texto que se llame captions.txt. Dentro de él 
agregaremos los comentarios correspondientes. El comentario para cada imagen 
debe ser introducido en una línea diferente del archivo de texto, ordenándolos de 
acuerdo con el orden alfabético de las imágenes. 
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Figura 9. En esta imagen podemos observar 
la correlación entre los comentarios y las imágenes. 


PHP 


PHP (Personal Home Page) es un lenguaje de programación clásico y no uno 
de marcas como HTML o XML. Posee todas las características de programación 
de un lenguaje propiamente dicho, como el uso de variables, sentencias condi- 
cionales, bucles, funciones, operadores, etc. Está mucho más cercano, por así de- 
cirlo, a la programación en C que en ASP, por ejemplo. Sin embargo, tiene algu- 
nas similitudes con este lenguaje de script: está orientado al uso en la Web y es 
ejecutado por el servidor y no por el cliente. Gracias a este último factor, PHP 
se vuelve muy útil también para el manejo de información de base de datos. 
Al ser ejecutado por el servidor y la salida enviada al cliente, tampoco es necesa- 
rio que el navegador tenga soporte alguno, pero sí deberá tenerlo el servidor web. 
Para ello será necesario instalar en el equipo servidor el intérprete PHP, que po- 
demos obtener en www.php.net/downloads.php. Debemos descargar el insta- 
lador; su nombre puede variar según la versión, pero podemos identificarlo fá- 
cilmente por la palabra installer en el nombre del archivo. 


243 


CREACIÓN DE SITIOS WEB 


Un chat en PHP 


Contar con salones de conversación instantánea en nuestro sitio web puede 
aportarnos varias soluciones. Pueden servir, por ejemplo, para proveer ayuda téc- 
nica y soporte a clientes, o para servicios de e-learning, por ejemplo. También 
podemos implementarlos a un sitio sencillamente para que éste se vea más atrac- 
tivo o como opciones de entretenimiento para los usuarios. 

En este caso, utilizaremos una aplicación en PHP sumamente personalizable y fun- 
cional. Se denomina PHP Free Chat y se trata, básicamente, de un script desarro- 
llado en PHP del que podemos destacar que es gratuito, fácil de instalar en nuestro 
servidor, rápido, y cuenta con soporte para diferentes lenguajes. No necesita de ac- 
ceso a base de datos porque utiliza el sistema de ficheros del servidor para almace- 
nar los nombres de usuario (nicks) y los mensajes. Soporta varias salas simultáneas, 
envío de mensajes privados, temas visuales configurables basados en CSS e ingreso 
de comandos propios de chat. Podemos descargar PHP Free Chat desde http://op- 
tusnet.dl.sourceforge.net/sourceforge/phpfreechat/phpfreechat-1.0-beta3.zip. 
Cuando tengamos extraído el contenido del archivo en una carpeta, simplemen- 
te debemos copiarlo al directorio de nuestro servidor web en el que deseamos 
que se almacene, por ejemplo, /PHPChat/. Luego tendremos que asignar permi- 
sos de lectura, escritura y ejecución a este directorio, y en el navegador, ejecutar 
el archivo index.php, ubicado en el directorio en cuestión. 
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Figura 10. Una ventaja de PHP Free Chat es que puede 
ser configurado para funcionar en español. 


Para obtener más información acerca de la instalación y configuración de PHP Free 
Chat, podemos visitar www.phpfreechat.net/install.en.html (sitio en inglés). 
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Java y Javascript 

Java es un lenguaje de programación orientado a objetos creado por la popular em- 
presa Sun Microsystems y basado en la estructura de C++. Se podría decir que es 
una versión simplificada de este lenguaje. Java está destinado especialmente al desa- 
rrollo de aplicaciones para el ámbito web, y posee la característica de ser multipla- 
taforma. Presenta muchas prestaciones de seguridad en tiempo de compilación y 
ejecución, lo que significa una adecuada y segura ejecución de la aplicación. Los 
programas y rutinas desarrollados en Java se denominan applets, aunque este tér- 
mino se utiliza mucho, más aun cuando se trata de aplicaciones para la Web. 
JavaScript es un leguaje de scripting basado en Java, pero mucho más simplifica- 
do. Similar en su sintaxis al HTML, JavaScript fue creado principalmente para ru- 
tinas y scripts simples que deben ser interpretadas por el cliente. Actualmente, la 
totalidad de los navegadores incluye soporte para esta tecnología. 

Existen muchas funciones para utilizar JavaScript, incluso algunas las hemos anali- 
zado durante este libro con el uso de Macromedia Dreamweaver (el caso de las imá- 
genes de sustitución o el de los menús emergentes, entre otros). 


A jugar! 

Como ejemplo de herramientas adicionales para nuestros sitios, vamos a utilizar un 
juego para comprender que el entretenimiento es una parte importante dentro de un 
sitio web. En este caso, usaremos Ping Pong 3D, un juego de pingo pong que, si bien 
en su código y programación no resulta complejo, arroja resultados sorprendentes en 
lo visual. Jugaremos a este popular juego contra un adversario, y ganará el primero en 
alcanzar los 21 puntos en alguno de los cinco niveles de dificultad. Las imágenes del 
juego fueron extraídas de fragmentos de la película Ping Pong. 

Para descargar Ping Pong 3D podemos recurrir al link www.bunnypot.com/ 
zip/pingpong.zip. Una vez que lo hacemos, debemos extraerlo a una carpeta. 
Veremos que contamos con dos directorios: pingpong y library. Para incorporar 
el juego a nuestro sitio, simplemente debemos copiar ambas carpetas a la ubica- 
ción del sitio que deseemos. En el navegador será necesario acceder al archivo 
pingpong.html de la carpeta pingpong para poder jugar. 


Ea RESUMEN 


Las empresas han adoptado la tecnología que brinda Internet para aprovechar todos los recursos 
que ésta les puede ofrecer. Así, la automatización de tareas dentro de los sitios web y la necesi- 
dad de brindar entornos profesionales y atractivos, hacen que la interactividad con el usuario sea 
el principal fundamento de los sitios. En este capítulo analizamos formas de aplicar estos concep- 
tos mediante la inclusión de diferentes aplicaciones y funcionalidades a nuestro sitio. 
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TEST DE AUTOEVALUACIÓN 


1 Enumere tres características de Macrome- 
dia Flash. 


N 


¿Qué es Flash Player? 


3 ¿Qué hardware necesitamos en nuestro 


equipo para instalar Flash 8 Professional? 


4 ¿Cómo se organizan las líneas de tiempo? 


¿Qué son los fotogramas? 

6 ¿Qué es un fotograma clave? 

7 ¿Qué es una interpolación de movimiento? 
Explique el procedimiento básico para apli- 
car una. 


8 Explique tres características de ASP. 


9 Enumere y explique por lo menos dos dife- 
rencias entre ASP y PHP. 


10¿Qué es JavaScript? ¿Tiene algo que ver 


con Java? 
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Y ACTIVIDADES 


EJERCICIOS PRÁCTICOS 


Y Compruebe cambiar de ubicación los pa- 


neles de Flash. 


Y Averigue en Internet si existe algún pro- 


grama similar a Flash. 


Y Pruebe crear diferentes simbolos ubicados 
en distintas capas y en diferentes instan- 
clas de tiempo de sus correspondientes fo- 


togramas. 


Y Pruebe los resultados del paso anterior 


mediante el menú Control. 


Y Averigúe qué otros formatos de aplicacio- 


nes podemos incluir en nuestros sitios. 
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Publicidad 
del sitio 


En este último capítulo analizaremos 









las principales técnicas que 

nos permitirán lograr una mejor 
promoción de nuestras páginas, 
contenidos, servicios y todos los datos 
de nuestros sitios que necesitemos 
publicitar. Veremos procesos 

como el registro e indexado 

en buscadores y motores de búsqueda, 


creación e intercambio de banners 
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Registrar nuestros sitios 251 

con los boletines electrónicos. EEE io 
Herramientas adicionales 260 
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Boletines electrónicos 214 

Resumen 215 
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REGISTRO EN BUSCADORES 


La integración de la tecnología a los mercados y empresas está establecida en la ma- 
yoría de los aspectos, y la publicidad de sus servicios no queda excluida. La promo- 
ción de nuestros sitios y de los servicios, productos e información que podamos 
ofrecer será fundamental si deseamos obtener más ganancias. 

Si bien ya conocemos las alternativas gráficas para que nuestros sitios sean atractivos 
y funcionales, un factor fundamental para que éstos alcancen el éxito final, es decir, 
que cumplan con ese objetivo inicial que habíamos propuesto, será su promoción 
dentro del ámbito web. Por eso, va a ser muy importante que nuestros sitios ad- 
quieran relevancia en Internet para poder lograr, entre otras cosas, oportunidades 
comerciales o el cumplimiento de los servicios brindados en forma masiva. 

Que nuestro espacio en la Web llegue a tener jerarquía y relevancia dependerá de 
muchos criterios y conceptos, como el de lograr un buen promedio de visitas sema- 
nales o poder incrementar las ganancias y la notoriedad, siempre dentro del am- 
biente que se corresponda a la categoría de nuestros servicios web. 
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Figura 1. Los buscadores nos proporcionan una buena 
alternativa para publicitar nuestras páginas. 


El hecho de poder dar publicidad a los sitios web no demandará demasiado de- 

sembolso económico, es decir, se puede realizar con bajos costos. Para ello, lo 
? 2 ? e 2 

más importante será establecer una presencia dentro de Internet, un método que 

facilite a los usuarios y potenciales clientes enterarse de la existencia de nuestro 

sitio. A partir de allí, si pensamos en cuál es la herramienta web que nosotros uti- 

lizaríamos para poder encontrar un servicio o alguna información determinada, 
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la respuesta es sencilla: los buscadores. Generalmente, el sólo hecho de figurar 
en los registros de los más importantes buscadores nos brindará más del doble de 
accesos a las diversas páginas de nuestros sitios. Imaginemos si a esto le agrega- 
mos un óptimo posicionamiento en él, es decir, que cuando un usuario busque 
información que mantenga una relación con la que nosotros ofrecemos en nues- 
tro sitio, nuestra página web se le presente en uno de los primeros lugares de 
los resultados de la búsqueda. 

Hasta aquí hablamos de la obtención de nuevo público y de la generación de tar- 
get, para lo que también es importante la transmisión de persona a persona como 
parte importante del proceso, pero que también influirá en el mantenimiento de 
los clientes. Otro elemento que va a ser determinante para poder mantener esos 
clientes será, obviamente, que éstos encuentren lo que estaban buscando en el si- 
tio, ya sea un servicio, un producto, información o cualquier otra cosa. 

Además de esto, podemos ofrecer servicios adicionales que ayuden a la promoción, 
como el envío de noticias y novedades o servicios personalizados mediante boleti- 
nes electrónicos, el intercambio de archivos gráficos publicitarios (banners), etc. 
Comencemos entonces a analizar todas estas alternativas y las mejores maneras 
y ejemplos prácticos para implementarlas. 


Los buscadores 

Existe una gran variedad de buscadores de información en Internet. En primer 
término, los clasificaremos según su metodología de trabajo. Esto es suma- 
mente importante, ya que cuando deseemos registrar nuestro sitio para que apa- 
rezca en un buscador, mucho tendrá que ver la clase a la que pertenece. Conoz- 
camos los tipos de buscadores más destacados. 


Índice 

Este tipo de buscadores organiza las páginas en una base de datos general divi- 
dida en categorías. Poseen un directorio por el que el usuario podrá navegar has- 
ta encontrar la página deseada o alguna relacionada con el tema buscado. Su or- 
ganización está planteada a través del trabajo humano, es decir, el personal de la 


mm EL SERVICIO DE LOS BUSCADORES 


Dentro de las estadísticas de promoción y publicidad de páginas web, más del 90% pertenece a la 
acción de los buscadores. Dentro de este porcentaje, el mayor responsable es Google, con el 80% de 
la actividad. El resto está dividido entre Yahoo!, MSN, Altavista y otros buscadores. Muchas empre- 
sas se registran e invierten en estos servicios, inversiones que son recuperadas rápidamente. 


USERS 949 


CREACIÓN DE SITIOS WEB 


empresa desarrolladora del buscador se encargará de verificar que todas las pági- 
nas estén clasificadas correctamente. Un claro ejemplo es Yahoo!. Para poder re- 
gistrar una página en este tipo de buscadores, debemos enviarles la dirección a los 
administradores del índice, junto con una serie de datos que ayuden a clasificarla 
(descripción, título, lenguaje, etc.). Si deseamos que varias páginas de nuestro si- 
tio aparezcan en las búsquedas del índice, debemos registrarlas una por una. 
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Figura 2. La organización de los buscadores 
tipo índice se maneja según la categoría del sitio. 


Motor de búsqueda 

Este tipo de buscadores basan sus búsquedas en un robot denominado spider 
(araña) que recorre toda la Web en busca de nuevas direcciones, añadiéndolas 
en su base de datos automáticamente. 

Antes, los motores de búsqueda no contaban con un índice, aunque ahora es muy 
común que cuenten con uno, por lo que en este tipo de buscadores, para registrar 
una página también podremos enviar al administrador la dirección, evitando así la 


oi PÁGINAS DESCARTADAS 


Cuando registramos una página dentro de la base de datos de un buscador, veremos que cuando 
concluimos el proceso, la mayoría de los buscadores nos informarán que no es seguro el indexado 
de la página. Esto se debe a que esta decisión es tomada por personal humano, y si la página no es 
satisfactoria para éste o no posee los contenidos adecuados, puede ser descartada. 
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demora de que el robot la detecte. El punto más sobresaliente de los motores de bús- 
queda es la capacidad que tienen de leer el contenido de un sitio y encontrar los da- 
tos correspondientes a la búsqueda que el usuario realizó, permitiendo también cla- 
sificar el sitio en su base de datos. Un motor de búsqueda es, por ejemplo, Google. 
Cuando el robot de un motor de búsqueda almacena la página que registramos 
en su base de datos, la examina recorriendo todos sus enlaces y su información, 
por lo que no será necesario registrar cada página del sitio para que aparezca 
en los resultados de las búsquedas. Con sólo registrar la página inicial, nos ase- 
guramos de que todo el contenido del sitio esté disponible dentro del buscador. 
Además, otro punto favorable de los motores de búsqueda es que examinan los 
sitios registrados en su base de datos periódicamente, lo que permite que la in- 
formación esté actualizada constantemente. 
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Figura 3. Los motores de búsqueda suelen tener más sitios disponibles 
para encontrar información, aunque sus búsquedas son menos específicas. 


Registrar nuestros sitios 

Tanto en los motores de búsqueda como en los índices, para registrar una nue- 
va página tendremos que completar un formulario con los datos correspon- 
dientes. Cada buscador suele tener un proceso de registro diferente y específico. 
Para acceder al formulario de registro, lo más común es que tengamos que entrar en 
la página principal del buscador y encontrar un enlace que diga Añadir página, Add 
URL, Nueva dirección, Sugerir sitio o algo similar. Esto suele llevarnos al formulario 
mencionado o a una página donde se explica cómo ejecutar el proceso de registro 
de nuevas páginas. Para comenzar, veamos cómo se realiza este proceso en Yahoo!. 
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E Sugerir sitios en Yahoo! 


IO lO 








te caso, www.yahoo.com.ar. 


E Dirjase a www.yahoo.com o a la alternativa que corresponda a su país, en es- 


2 Entre las categorías, seleccione la que corresponde a la página que desea agregar. 
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El Dentro de la categoría correcta, presione en el enlace Sugiera un sitio. 
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nm IMÁGENES CON PALABRAS CLAVE 


Las palabras clave se introducirán en los componentes más importantes de las páginas. Entonces, 
tenemos que saber que será importante incluirlas en las imágenes [en el nombre del archivo) y en 
sus textos alternativos y descripciones. Por ejemplo, si una imagen ilustra un servicio, convendrá 
ponerle el nombre de ese servicio al documento gráfico e incluirlo en su texto alternativo. 
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6 Detalle los datos de su cuenta en Yahoo! (usuario y contraseña) para acceder al 
servicio. Si no posee una, haga clic en Inscribite. 
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EJ El proceso está concluido. Ahora su página será analizada y, si es aceptada, 
estará publicada en unos pocos días. 
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En el caso de los índices, al tener que clasificar la página por categoría, lo más 
normal es que debamos navegar por ellas y, una vez encontrada la categoría en la 
que queremos adicionar nuestra página, tenemos que buscar el enlace mencionado. 
Para los motores de búsqueda no será necesario navegar por ninguna categoría. 
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a Especifique la página que quiere sugerir. Si lo desea, puede agregar también 
un comentario sobre ella. Confirme el código de verificación y presione el bo- 
tón Añadir URL. 
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El El proceso ha finalizado. Si es aceptada, su página se agregará en la base de 
datos en pocos días. 


Elementos para tener en cuenta 

Una vez hecho el registro, hay muchos factores para tener en cuenta con respecto a 
nuestro sitio y sus páginas. Estos nos ayudarán a aparecer en los primeros lugares de 
los buscadores. En realidad, es conveniente realizar estos procesos antes de registrar la 
página, ya que son importantes para la organización y clasificación de su contenido. 
Contamos con muchas recomendaciones fundamentales para lograr un buen ran- 
keo (posicionamiento) de nuestras páginas. Entre ellas, elegir un buen título, 


nm GOOGLE SANDBOX 


Si registramos una página en Google, no aparecerá instantáneamente. Eso se debe a que las polí- 
ticas del buscador determinan que un sitio se torna interesante cuando pasó el tiempo inicial de su 
publicación. Mientras tanto, serán evaluadas y organizadas. A este estado se lo denomina SandBox 
(caja de arena), un purgatorio de páginas que todavía no están listas para ser indexadas. 
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aplicar una buena y breve descripción de sus contenidos o seleccionar correc- 
tamente sus palabras clave. Algo que debemos tener en cuenta con respecto a es- 
tas técnicas es que no debemos abusar de su uso, ya que si lo hacemos, el buscador 
puede detectarlo y catalogará nuestra página como spam page (página no desea- 
da). Es por eso que conviene utilizar estos recursos con criterio y moderación. 


Palabras clave 

Son las palabras o frases que introducirán los usuarios en sus búsquedas, y que 
relacionarán a éstas con nuestras páginas. Pueden ser una o más palabras combi- 
nadas, y debemos ser precisos al elegir las adecuadas. Para lograrlo, podemos ha- 
cer pruebas con distintos buscadores, comprobando las diferentes combinacio- 
nes de palabras relacionadas con los temas principales de nuestra página. Al leer 
las palabras clave que el usuario de la búsqueda introduce, el buscador examina- 
rá los contenidos de las páginas en su base de datos y verificará las coinciden- 
cias, devolviendo en pantalla los resultados coincidentes. 

Respecto de los sectores de la página donde colocar las palabras clave, podemos de- 
cir que contamos con tres áreas determinantes: el título, el cuerpo y la URL. 

Lo primero que debemos hacer es seleccionar un título adecuado (<TITLE>), con 
el nombre de la empresa u organización, una concisa descripción de su fun- 
ción y si es posible algún dato más acerca de su domicilio o forma de contac- 
to. Por ejemplo, un buen título parar nuestro sitio podría ser ToadDesign - Siste- 
ma de haberes - info(Otoaddesign.com.ar. También podemos agregar algunas pa- 
labras clave adicionales que tengan que ver con la función de la empresa, como 
Gestión, Liquidación y Jornales. Lo normal es que posea de tres a diez palabras 
de longitud que alcancen un total de veinte a sesenta caracteres. 

Como segunda norma vital, debemos establecer las palabras clave en los primeros 
párrafos del cuerpo de nuestro sitio, ya que en ellos los buscadores pondrán mayor 
atención que en el resto del contenido. Lo más conveniente es agregar a nuestras pá- 
ginas un párrafo que sirva como introducción al resto del contenido, incluyendo 
en él los conceptos y términos más importantes. Luego, en el contenido, debemos 
asegurarnos de que los conceptos más importantes estén claramente legibles. Po- 
demos también destacarlos con negrita o con algún tipo de encabezado. 


oi CARACTERES ESPECIALES 


Dentro de la generación de palabras clave, existe una duda general acerca del uso de acen- 
tos, mayúsculas y demás caracteres especiales, ya que la mayoría de los buscadores no re- 
para en estos símbolos. Lo más recomendable es escribir las palabras de manera correcta, 
usando los símbolos, acentos y mayúsculas cuando sea necesario. 
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Finalmente, otra zona donde los buscadores examinan para indexar nuestra pági- 
na es en la dirección de la página en sí, tanto en el nombre del dominio como 
el del directorio o el del documento HTML. Será fundamental para la elección 
del dominio tener en cuenta este factor. Por eso, si la página es de una empresa 
en particular, debemos intentar registrar el dominio con el nombre completo de 
la empresa, tratando de evitar otros términos o caracteres especiales (como guión 
del medio o guión bajo). Si la página se dedica a fomentar alguna actividad en 
particular, podremos registrar un dominio con palabras que la describan. Por 
ejemplo, si queremos indexar una página que hable sobre liquidación de haberes, 
podremos registrar un dominio como liquidacionhaberes.com. 

Como dijimos, también será importante el nombre de los directorios que contie- 
nen las páginas en el servidor y el nombre de las propias páginas. Por ejemplo, si 
una de las secciones de nuestro sitio se dedica a los servicios de liquidación que ofre- 
cemos, podemos crear un directorio denominado servicios_liquidacion para que 
contenga todas las páginas que conforman la sección. Supongamos que dentro de 
esos servicios ofrecemos un software que ejecute dichas tareas y una tarjeta de con- 
trol. Para cada uno de los elementos (si diseñamos correctamente el mapa del sitio) 
tendremos asignado un documento en particular. En el primer caso podremos lla- 
marlo software_liquidacion.html, y en el segundo, tarjeta_control.html. 

Así, por ejemplo, la dirección quedaría como http://liquidacionhaberes.com/ser- 
vicios_liquidacion/software_liquidacion.html. De esta manera, el buscador pue- 
de encontrar las palabras claves también en la URL de cada página. 


META tags 


La mayoría de los buscadores también cuenta con la posibilidad de leer una clase 
especial de etiquetas, que podemos agregar a nuestras páginas de manera muy sen- 
cilla. Éstas se usan para incorporar palabras clave o datos relacionados que no se 
encuentren en el contenido de la misma. Es muy recomendable el uso de esta he- 
rramienta, aunque no todos los buscadores pondrán atención en las etiquetas ME- 
TA. Por ejemplo, los buscadores del tipo índice extraerán estos datos de la informa- 
ción que proporcionamos en el formulario de registro. 

Para insertar las etiquetas META, debemos hacerlo dentro del encabezado de la 
página, es decir, dentro de los tags <HEAD> y </HEAD>. Existen dos tipos de ME- 
TA tags principales: el que nos permitirá especificar las palabras clave y el que 
nos da la posibilidad de agregar una descripción adicional a la página. En am- 
bos casos, la sintaxis es extremadamente simple. 

Cuando deseemos agregar palabras clave a la página, bastará con incluir el tag 
<META> con su modificador NAME=, que definirá el tipo de contenido, y el mo- 
dificador CONTENT=, que es donde introduciremos todas las palabras que consi- 
deremos clave, separadas por coma. Entonces, una etiqueta META para palabras 
clave básica quedaría aproximadamente con la siguiente sintaxis: 


Registro en buscadores 


<META NAME=keywords CONTENT="l¡quidación, haberes, sueldos, jornales, 
gestión, economía” /> 


En el segundo caso, en el campo NAME= tendremos que establecer que se trata de 
una descripción, por lo que sustituimos el valor keywords por el de description. 
Luego, en el campo CONTENT=, en lugar de especificar las palabras clave que que- 
remos agregar, debemos detallar el texto con la descripción correspondiente, de 
modo que un ejemplo válido sería: 


<META NAME=description CONTENT="Empresa dedicada al software de liquidación 
de sueldos y jornales.” /> 


Veamos ahora cómo agregar META tags en Dreamweaver: 





E Agregar META tags AO AO 


a] Mediante el uso del panel Archivos, abra la página a la que desea adicionar- 
le las etiquetas META . 


2 Diríjase a Insertar/HTML/Etiquetas Head. Allí seleccione el tipo de META tag 
que desea incluir. 
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Especifique el contenido del META tag. En este caso, tratamos con palabras cla- 
ve. Ingréselas con espacios entre palabra y palabra. Presione Aceptar. 
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Herramientas adicionales 

Dentro de los buscadores, contamos con algunas funciones y opciones extra que 
nos brindarán diversos servicios para ayudarnos en la publicidad de nuestras pá- 
ginas. Muchos de estos servicios tendrán que ver con la valoración, el posicio- 
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namiento, la examinación y la gestión de visitas de nuestros sitios, dominios 
y páginas. Comencemos a conocer en detalle estas útiles herramientas. 


GoogleRank 

El buscador Google agrega a su funcionalidad, un concepto que funciona como 
base de su tecnología de búsqueda y publicación de los sitios de su base de 
datos. Este factor es denominado PageRank. 

PageRank es el punto clave en el funcionamiento de Google y se dedica a ordenar 
y posicionar las páginas en las búsquedas, según su orden de relevancia para los 
usuarios. Esta aplicación tiene los mismos fundamentos que la World Wide Web 
para la valoración de las páginas, usando los links que éstas contienen para deter- 
minar los votos que califican a la página. Es decir, que cuantos más clics en los di- 
ferentes enlaces de una página se cuenten, mejor valoración tendrá. Por consecuen- 
cia, la página estará mejor posicionada en las búsquedas que le correspondan. 
Google también tiene en cuenta el origen de los votos, es decir, que si se accede 
a la página en cuestión a través de otra con buena valoración, el voto será más im- 
portante y la página de destino será mejor posicionada. Por lo tanto, un factor 
fundamental para que nuestra página esté bien ubicada en las búsquedas de Goo- 
ele será el hecho de estar enlazados a páginas consideradas de relevancia para es- 
te buscador. Pero debemos aclarar algo: es importante que la página que nos en- 
lace hable sobre el mismo tema o temas relacionados con la nuestra, ya que Goo- 
gle y PageRank también basan su operatoria en la temática de las páginas. Es por 
eso que si la página que nos enlaza nada tiene que ver con los contenidos de la 
nuestra, los votos se valorarán en menor medida. 
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Figura 4. Mediante la barra de Google podremos acceder 
al PageRank de cualquier página que estemos visualizando. 
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Podemos conocer el PageRank de nuestra página, una vez que ha sido registrada y 
aceptada por Google, instalando la barra Google (http://toolbar.google.com/ 
T4/intl/es/index.html), o bien desde el sitio www.mipagerank.com. 
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Calcula al PageRank de un sitio web ingresando su URL 
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Figura 5. En el sitio www.mipagerank.com podremos 
averiguar el Google PageRank de nuestro sitio y de otros. 


Yahoo! Site Explorer 

El sistema de búsqueda de Yahoo! se complementa con algunas herramientas 
muy útiles. Entre ellas se destaca Yahoo! Site Explorer, que nos permitirá exa- 
minar todas las páginas indexadas en la base de datos de Yahoo!, mostrándo- 
nos por dominio todas las páginas que componen al sitio. 

Por ejemplo, si al ingresar en Site Explorer especificamos nuestro sitio ya inde- 
xado, nos mostrará todas las páginas que integran el mismo dominio. Esto nos 
servirá para controlar que todas las páginas que deseamos estén disponibles para 
las búsquedas, así como agregar las que no lo estén. Para acceder a Yahoo! Site 
Explorer debemos ir a http://siteexplorer.search.yahoo.com. 


o ROBOTS.TXT 


Los motores de búsqueda basan la examinación de los sitios en robots denominados spiders. Estos 
se leen en la carpeta raíz de cada sitio, un archivo con los comandos para el indexado. Este archivo 
es denominado robots.txt, y contiene las instrucciones para la adecuada publicación de la página. 
Podemos excluir directorios de las búsquedas con el comando Disallow: /directorio excluido. 
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Figura 6. Yahoo! Site Explorer nos permite examinar las páginas 
de un dominio determinado que fueron registradas en el buscador. 


De forma predeterminada, Yahoo! Site Explorer nos mostrará todas las páginas corres- 
pondientes al dominio especificado ordenadas por búsqueda y profundidad. Tam- 
bién podremos examinar estas páginas individuales haciendo clic en el enlace Explore 
URL de cada una de ellas. Contamos con un campo en el dominio general llamado 
Inlinks, que informa acerca de la cantidad total de enlaces entrantes que posee la pá- 
gina o dominio. Para analizarlos, tenemos que hacer clic en Inlinks. Para agregar una 
nueva URL del mismo dominio, basta presionar Submit Site Feed or URLs. 
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Figura 7. Con la opción Inlinks de Yahoo! Site Explorer, podremos 
averiguar la cantidad de enlaces entrantes de la página consultada. 
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Google AdWords 


Ésta es otra herramienta de Google que nos ayudará a poseer más visitas en nuestro 
sitio y, por lo tanto, ayudarnos a un mejor posicionamiento en el buscador, aunque 
no directamente. AdWords es un servicio publicitario de este popular motor de bús- 
queda que nos dará la posibilidad de publicar anuncios de texto en el buscador. 

Si realizamos cualquier tipo de búsqueda en Google, veremos que en el costado dere- 
cho de la página de resultados se muestra una barra lateral que ofrece una serie de 
anuncios clasificados como Enlaces patrocinados. Éstos son los AdWords de Google. 
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Figura 8. Los AdWords de Google son denominados Enlaces patrocinados 
en el buscador, y se presentan en el costado derecho de la página de resultados. 


La principal diferencia que se encuentra entre este sistema de publicidad por tex- 
to y otros similares, es que éstos serán sensibles al contexto de la búsqueda que 
el usuario realice. Es por eso que AdWords es una excelente forma de llamar la 
atención de clientes potenciales. 

Es válido aclarar que Google Adwords no influirá directamente en la valoración 
de los sitios, y nada tiene que ver con los resultados de la búsqueda gratuitos, ex- 
cepto por el hecho de que presenta una relación en la temática. 


o GOOGLE ADSENSE 


Se trata de otra herramienta complementaria a Google AdWords. Su función es mostrar anuncios 
publicados en Google de manera rápida y eficaz. Debido a que los anuncios [AdWords] se muestran 
según las búsquedas o intereses de los usuarios, es una excelente forma para rentabilizar nuestros 
sitios. En www.google.com/adsense/?hl=es se puede obtener información o contratar el servicio. 
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úl cuando se haga che an lios Lar dratad da APO de ie 
Ragiss de clentés aciiados H spacan taniy an 


Comen aleciiiniii A 


Cortrazeñs Mia infección Reyisi ete ahora 
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| ax infarmes anllan be bnilirarán la moa hanclana. Tadas las ramblas can 


Figura 9. AdWords de Google se puede contratar simplemente teniendo 
una cuenta de correo en Gmail, el servicio de correo de Google. 


Este servicio pose una cobertura mundial que incluye 150 países y está disponible en 
diferentes idiomas. Para conocer o contratar el servicio debemos dirigirnos a https:// 
adwords.google.com/select/Login. El costo se basa en un sistema de costo por clic, 
es decir que sólo pagaremos cuando alguien haga clic en nuestro anuncio. 


E Contratar Google AdWords AO AO 





i] En la página principal del servicio, presione el botón Empezar. 
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fl Seleccione el tipo de servicio que quiere contratar. En este caso, selecciona- 
mos la Versión estándar. 


E) PELO A A 
Artn War Párontos Hanpi Aja 


A 


Que- O- a O ass artos. tdo E) 


E roo od cometa 


Google Ló qua impara trn lès rositados Envents un mánca | Ayuda 


A i 








Elija la relacion que más le biterese Preguntas hecusides 

: è Cuándo Y Cómo 
El gm el de 
ficiuración? 


O Verston pará prlucipbantes 
Anuncio un sól produció o serició con opciones smplicadas Esta allémába 
se lcomienda 4 las persónas que usan publicidad por mernel por prima VEZ 
Pasó a lá versión estáccar en coalguiel mormórde + Linia gerat 


Hiescórén bi dyii 


E Vmin Ainda 
Urea nuestra amplia quina de luncio mee resraciorsiicas de Advaida Cp nea 
rantúdar de oferto, posibidad de cua deriva campañas, segmento de 
ESMnarEs y un arin de verñajas más Esta añeiridta se recomienda $ itn 
amáncianteo de imernol orpermantados y 3 lay medianas o grndes umprebar 


¿Ho está segura de cambiartódada” Compior ls opecoes con cacdelade 


rr RA =, 


| Lenin p ] 


Exuloo de Adviedo > Cul dtonal > Enseroo sa ensada 


E] A A as 
Abo DES va Páróntos Hanses Ayla 


Qus- O- 0 12 E O ceda ipoe G mda E) 


a AE 
rs a pp ame eee ani a ee arent 


e e a a aT 7 a 
compramico: cu anuncios no 6 pubicatán hacia que Yellfique 341 Cuerda y era cus datos de faciuración. Cibailameme, 
puéds medicas As necios o deben Av campaña A cahar mimi 


Seleccionar chantes pòr idioma 


= ¿Die correr ll: 


alo griech 
= j rada? 


¿Quésdomas hablan sus chenies? | 
¡Alurián X i i 
Pata seleccionar ráros idioimas, manten ¡Chino {aige aty = Glisin de Afadi 
pubsada la inclá conteo? o la Jecia comino ¡Chino firadicional 

¡Enreano Mesa em ln la 


(Darts AA 
¡Emrlardón I [Emar] 


Francés 


Seleccionar cllertes por ubleación 


¿Cuál pa pi tamaio dòl Woi èn él que desoo que Aporrea 54 Anunció? Elisa Un 


so Falces ylendtodos Sus anuncios apanicerán en las. húsguedas que 2 peaboén en cualquier parte de las 
tbicacionas que haya elegido 


Regiones y dinladas- Sus arinciós aparecerio en brs busquedas que se realicen dentro de la regiones y 
ciudades que haya stegido 
(Ho está dispomble én bodas lag ubi stinne] 


Personalizado > Sus añnincós Ah mostrarán en das busquedas realizadas dénteó d6 Un rado toncrodo de su 
empresa o de oirá ubicatado quee ela 


tide) 


Cájia estonal- Erresaos se Mensala 





ol Elija los países que desea que visualicen su anuncio y agréguelos mediante el 
botón Añadir. Haga clic en Continuar cuando haya finalizado la selección. 
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Registro en buscadores 


E" A A ls 
Ahen Dih va Piako: Hansis Aja 


Q~- O -id E O| pma ee i Oi 


i hi: Jacobi ya. injan Tt Eir a, acicate SA A 


le Ló qué dmapóndta Sd vidad os. iii auda l Ermrianp MENNENE 
Gi dihi oog C Ciodr animado: + Tetris palabra elére | E Letablecor preiós F| Riwibèi iuenta do Pepi 


Seleccionar los clientes por pais o territorio Preguntas ievurites 


Seleccione lor pasee odermonos de la iiquierda en los que dera publicar cu aruncio y, a contermuación, haga clic en 

añadir” Soleccione lartos cómo quiera ue anuncios ve mostrarán a los brevanos de bai ubicaciones yae haya d 

di regional o pergonalizada? 

3 J a ilbearo de A Word 

Faibes e lentipnas seleccionados 

[Maurico fargantina 

¡Mauritania ¡rara Biscn0 én da avila 

{Maytie ¡España cS 
Lingi 

Ino ¡Estados Lindos 

imdir lenie 

¡Mónaco ¡Venezuela 

¡Mongol ¡México 

¡Mondserral 

¡Mora mbigua 


E) A AAA A A 


Ahen Dicón va Párontos Hanamant Aia 


Que- O- i B O | A muona iremos Qlramás E) 


Ei hi: Jocteroribi gordo. compiten JE mara vn: aio rrei 2130610034740 


A iiti Cisnes objetivo b| Crear aniiivčió |} Gahard palabra dls A Cotan phòsia E evitar dtnda + Regil 
= 


Crear un anuncio Piega hhecioenbes 


Ejemplo de animei coin 


sedDisidn 
Semeins de hquidación de haberes 


Excalante Soteare Gestión] mu encia 


era lc E pr a * ¿Qué sz le guisa edo para 
anuncia de Goigs 


nicas? 


Cabecara aadiliga htimerno de 25 curacleres 

Pomerá linas deacrgira Serncios de bquidación de labores Máximo de 35 carachores 

Segunda brea destuplra Excolórto Software Gostidel Máxima de 5 caraciores 

WRL waibo. [2] hap wwa oaddesignienrm ar Hinni da 35 caraciarpa 


URL do destinu [F] hiipi ael [erwioaddasign com ar Máimmo de VIDA caraciaraa 


(Renamer mune _] (C Comia =] 


EOR Gdje - Eyapa di Adio > Gulavcdñonal > Emienos un miniai 





6 Aguarde que se revise el texto del anuncio y se verifiquen las URLs. 


Incluya las palabras clave que vincularán las búsquedas con su anuncio. Haga 
clic en Continuar cuando haya finalizado. 
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3 AdWords de Google: Soloectonar palabras clave 


Ahea Erkin Wer Faros  Herramerlós Aaka 


Qus- O- h) A h A erna Ghar E) S- T a A 


A A ki aH 


Google 


Adara i 


Le gua linpotta sen low bempliordor ™ 


Aywa | En lenca n rnrisade 
A + | Emeccioaar pala ab | aaa ¡uecio * Horam suma b) Papei eam 


Seleccionar palabras clave Preguitas hecientes 


-Dui pairi dibo Segur para croa 

modista de palabrins clon? 

“ ¿nde puedo acotar 0 Ara 
ecc palabras Clere? 


a Ouian wari gii aimeo 
Sy anúncio 6 mobi cuando los usan rualicon búsquedas un Google con les palabras clore que ha slegio agui 

Dichos tiirnos debon están dirmctarnénte ndacionados con 44 amuin, por tinpi, no iniraduica “agencia inmobiliaria? 
sivende cochés Proparriane 20 m menta palabras clas a Án de abiener las mejores resultados Listade esermlos 


Introduzca cuantas palabras o fases especiócas desee, 


¿Desea más Información? 
ima por naa 


Imroduzca un término para ver palabras clave redacionadas 
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à D Luz gi cp ll 
concordanci ampligar 
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> lana de Aros 
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E 
[ Condos j 
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EJ Seleccione la moneda y establezca los importes que está dispuesto a abonar 
por día y por cada enlace. 


RAR ET 
Whio Edición Wer 


Ou- O- hA E E 


e] El bitps: oder quo coria ad pera r=cD6 a aH 


Google 


Lo qué lmporté pen low emiliano ** 


r r 
AdWnrd Cheaides alijatizn E Cima acia E reia paar cr ¡Fatales prrcto |» erica cuerda > Pepi ens 


Seleccionar una moneda Preguntas hecasntes 

* ¿Lando amiest a aula 
i dijoa $ eit 

Pagar lus facturas de esta cuerda mediado: [Peso argertino (AREA Yeopones depago MAT 

Con elo especifica el modo en que usted electuna sys pagos con nosolros, no el modo en que Nevará a cabo las 

hansacciónes con sue tlerdes 


Nota Esta opción no 008 podrá cambiar uma ves que haya acbrado su cuerda 


Aa E aa 


¿Qué cantidad máxima le gustaría invertir, de media, por día? 


El presupuesto dano 4] controla es copies, Cuando pa alcance el limde dino, por lo general su amacio dejará de 


publicarse durante pl sexto del día. [El presupuesto conbreda La fhecuenta de a aniició, nó su panitih Acme e 
hduica $u prenupuestó lentas vecta como conidéro nocasarño 


inlioduzca $4 prosupoueslo diama. o Ej 1 


* ¿cudodo o aci? 


è Elo arg je Aonde 


Diaci n la myada 


¿Cué cantidad máxima esta dispuesto a pagar cada vez que un usuario hace clic en su 
anuncio? 


La posición dé cu anunció ene delenmanada pos cu costo pordlle [CPC] márima [9] El CA rmásinán peproserta al precin 


mát alo que está dispuéclo a pagar cada vez qué un usuario haga clic añ su anuncio. Podrá cambiario tantas veces como 
considere necesario 


A ¡Mlinarmea: E 0157 


Un CPE más año hace que el anuncio ocupe una posición supearor y que, por do general, cbbenga un mayor número de 
elica 



































9 Verá la previsualización de su anuncio. Presione el botón Seguir para registrar- 
se para continuar con el proceso. 
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10 Establezca una cuenta para Google AdWords. También 


E] A A As 


Arheo Diin ve Pivartos — Hsrsrertía foja 


Qus- O- 0 A h E a ie ratas. mda E) 


T bilgi acta gero imja [Redrado a pene e aa aie i r D L er ae 


Frasapisaa dae: RETA ie 
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Facalerio Sofware Gecdión! 
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Palabras dave; [Editar] 
sofware geslior acoromía Haberes liquidacion sueldos jomades 


CPC máximo: ARE DO [Edita] 


Cuando 3684 necesano, le ersáremos paños elitcondos con du pubácidad en Google 


(51 Además, deseo recibo balsas eésematrros periódicos con sugerencias. buenas práclicar, rcomandaciones para 
mejorar el iendinianto de la cuarta y ancuerias ncassonales para ayudar a Google a mejorar AA orde 


¿Cameo descubuó Adonde de Eongle” 
+41 un rudo 0 un anuncio en ql $20 de Google 


Saqulr para roqhrrqaza = 


cuenta de correo de Gmail. 
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Dios inä cuenta dé Gó daghi nisa pri AdWords 
Asegúrese de paa su diección de coreo es conecta. Recibiiá en sla un maniaja de coreo pará peniear 
ša ciei 


Comen elechónico naar ddeign com.ar 
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información de mpabro, 
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phases 
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| ) Creu puanta a | 


Ey Espere mientras se crea la cuenta. 








Registro en buscadores 


Buscar en la ayuda 


--¿Pueda dispootcde ye 

cuerdas de Adenda 

s Cinn pardo canja 
Aai 


a iian 


Bwn an ia ayida 


12 Se mostrará la página de finalización. Un mensaje se le ha enviado a la cuenta 
especificada para comenzar a utilizar AdWords de Google. 
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E) A AA E LS 
Ardo Ldcón vai Pavontos — Herstesrtia — Joids 


EE = (ed aj ¡3 j po begad Perakas e mitmeda E gi 


úl hits ladrar aa recargar rra tie ode AATAL 


Go ogle Lo que impona con 04 sesulrados ** 


Hegisiro completado 


“ ¡Policidades! Acaba de coso su cuenta de AdWords. 
Deeccin de comeo electóreco de accesa infofibasddesigo cor ai 


Enmarmos un mensaje de coreo electónico a lá dueccón ejpecócada, solcdandole que compruebe su cuenta y 
esla la información de Bctursción Cuando haya completado estos paños, se empezará a publicar su anuncio, Trar 
karentiación, pueda acceder a Ads medirse esla dneccrón de corto etico junto con la conraseñá 
escpacifca artarinrmarén 


Si ammacio ns publicará hasta qué compruobe ss cuenta y facilivo la información de locación, 

A le ardenor dirección de coco elecieónico mu. es Sus y no pueda verficacla, puede Cariualla en Cuentas de 
Gosqle- Si no recibe ningún mensaje, por feo, póngase corfacto con alsesicio de arisiencia de Aflords 

Laa recita guás de preyación para hacerse una den del arpecto qué bendrá eu cuenta 

Consulte nuevirás ¿you de oplirutación pará descubir cómo oblenér el máximo erdmmiento de su cuenta de 
Afis 





OTROS MÉTODOS DE PROMOCIÓN 


Para finalizar, analizaremos otros dos métodos para promocionar nuestras páginas web 
y los servicios que brindamos en ellas: los banners y los boletines electrónicos. Ambas 
técnicas basan su funcionamiento en atraer nuevos clientes, o en llamar la atención de 
potenciales visitantes para nuestros sitios. Veamos las características de cada uno. 


Los banners 

Un banner es un elemento gráfico que podremos incluir en nuestras páginas web 
y que puede servirnos como medio publicitario y de comunicación. Podemos 
aprovechar esta útil herramienta para intercambiarlos con los administradores de 
otros sitios, y así, contar con la posibilidad de que nuestros banners aparezcan en 
otras páginas, publicitando alguno de nuestros servicios o el sitio en general. 


oi SPAM PAGE 


Algunas páginas con procesos no del todo legales o con palabras clave y META tags en exceso, se- 
rán clasificadas como Spam Page. Algunas cosas que harán que el buscador determine que la pá- 
gina es de este tipo son poner párrafos como comentarios, poner un texto con palabras clave del 
color del fondo para que no se note o usar palabras clave que nada tengan que ver con el sitio. 
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Los banners se basan en los formatos GIF y JPG, el primero para los banners anima- 
dos y el segundo para banners estáticos. En los últimos tiempos, también se han agre- 
gado otros formatos dinámicos e interactivos, como Macromedia Flash, Macromedia 
Shockwave o Java. El formato estándar de un banner es generalmente horizontal y de 
468x60 píxeles, aunque puede variar y su estilo es decisión exclusiva del diseñador. 
Existen diferentes denominaciones para los banners según su formato. Por ejem- 
plo, cuando el formato es cuadrado, se los suele llamar Robapáginas; cuando 
son verticales, Skycrapper o Rascacielos; cuando son muy pequeños suelen de- 
nominarse Botón; cuando se presentan sobre una capa flotante encima de la pá- 
gina se denominan Layer; y cuando ocupan toda la página precediendo la carga 
de la página original se los llama Interstitial. 


UBH onos 

AA E E tono del dim 

A er 

EA A 

a Tano rernenenitaro Enviá mv e de beata Libi 
fari fl a 


Fat a e be mi y lu poletu GRAHA ul 
4H Mona | Pel bime IPIS y SOKFRÈEHIETE! 


BECAS Y PREMIO 
BANCO RIO 2006 


Becas para 
Docentes 


0800-999-2727 


ALAVA A 





Figura 10. Diferentes formatos de banners electrónicos. 


Normalmente, los banners suelen representar una sección, servicio, producto, 
oferta o novedad que presenta un sitio. Esto fundamenta su uso en cuanto a la 
publicidad. Los banners, además, suelen tener un formato básico que, además de 
ser animado, incluye varias líneas de texto descriptivo e imágenes ilustrativas. 


mm INTERCAMBIO DE BANNERS 


El intercambio de banners es un sistema para intercambiar estos elementos de publicidad con otros 
usuarios y sitios. Existen muchas empresas y proveedores de hospedaje web que ofrecen estos ser- 
vicios. Su operatoria suele basarse en el ratio (2/1: cada dos banners que publiquemos, se publica- 
rá uno nuestro), casi siempre es gratuito y es una excelente forma de publicitar nuestros servicios. 
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Sus animaciones no suelen ser demasiado complejas (sobre todo en el formato 
GIF), ya que el peso de estos archivos normalmente posee un límite para evitar 
largos tiempos de carga (establecido por el proveedor de hosting o servidor web). 
La intención y propósito de un banner es llamar la atención del visitante del si- 
tio que lo presenta, dando en la mayoría de los casos la posibilidad de un enla- 
ce adjunto que lleve a la página o sitio que publicita el banner. 

Cada vez que un usuario ingresa en un sitio con un banner, éste será mostrado 
en el navegador. Este proceso se denomina impresión. Luego, cuando el visitan- 
te del sitio hace clic sobre el banner y activa el enlace que éste posee, es dirigido 
automáticamente a la página de destino del mencionado link. Este proceso se co- 
noce como clic through. AL relacionar ambos conceptos, obtenemos una deter- 
minada tasa llamada CTR (Clic Through Ratio), que es la que mide el número 
de veces que se ha hecho clic sobre el banner, comparándolo con las veces que se 
ha mostrado. Esto establece el éxito de la campaña publicitaria a través de los 
banners, y suele rondar entre 0,1% y 1%. 


E Banner en Fireworks PASO A PASO 





E Abra Fireworks. Cuando el programa esté listo, vaya a Archivo/Nuevo.... 


2 Establezca los valores de ancho y altura del banner, y el color de fondo. 


i, O i id F 


Ad 
Tamaño del ereo: i 
Arcana | 458 
Abra: [u [its 





Para agregar fotogramas, recurra a Edición/Insertar/Fotograma. 
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ES Debajo del área de trabajo, puede encontrar una barra que le permite recorrer 
los diferentes fotogramas. 


A AAA S 
fuchreo Edcón Ye econ Mobic  Tedó. Consell Piro veda duda 


DWERS ae >ne 


"Propiedades 
Documento beibi 
Ti hi Ai 


ai 





5] Edite cada uno de los fotogramas insertando los diferentes tipos de elemen- 
tos (texto, imágenes, figuras, etc.). 


AA AA AA O 
Suche Biti re econ Malie Dodò Comedia Piro veda qua 


o0+ abr a.- 8 


E w i NCS 
Y Elmo di e E 


A gE ajo A aioe w 





As o ion e a | [Ajuste auto. 


6 Desde Archivo/Guardar como..., guarde el documento con el formato GIF animado. 
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SA oi 
A apa 
gaje me 
Ela | Capa de web 
am ¿E t 
E] | 


Diin 


Fibitki PAG |" pra] 


Eha PID 
TEF Fi" 
«v E mo ae l [WM gd 


Tio g Eo A A sel 





E > [justo auto. 


Boletines electrónicos 

Un boletín electrónico es una herramienta dedicada exclusivamente a publicitar 
servicios y comunicar novedades a nuestros clientes actuales. Se basa en el envío 
de mensajes de correo electrónico periódicos, semanales, mensuales o anuales 
en forma masiva a los clientes que se suscriban a este servicio. No servirá como 
método de promoción, ya que el envío de correo masivo a personas que no lo 
requieran es considerado una práctica ilegal (spam). 

El formato de los boletines electrónicos es similar al de una página web, es decir, 
desarrollado mediante el lenguaje HTML. Generalmente, los boletines electró- 
nicos de un sitio poseen un diseño basado en las páginas originales del sitio 
(colores, logotipo, estilos, etc.), pero su característica principal es la reducción y 
simplificación en las opciones y el diseño, incluyendo sólo lo que se quiere comu- 
nicar y algunos links que vinculen a los contenidos completos en el sitio. 

Este servicio es brindado normalmente por los proveedores de alojamiento web, in- 
cluyéndolo en sus paquetes de servicios adicionales. También existen sitios de empre- 
sas dedicados a ofrecer el envío de boletines electrónicos, en la mayoría de los casos 
gratuitamente. Incluso hay sitios que permiten subir nuestros códigos HTML de los 
boletines y generar un cronograma de envíos. Otra alternativa es utilizar un softwa- 
re profesional exclusivamente dedicado a generar y programar el envío de boletines. 
La codificación de los boletines electrónicos en HTML será exactamente la misma 
que con las páginas web tradicionales, exceptuando la característica de que los links 
siempre harán referencia a vínculos externos. Es decir que, por ejemplo, para in- 
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cluir un link en el boletín que haga referencia a la página servicios/software.html de 
nuestro sitio, tendremos que colocar la ruta de Internet del archivo, es decir, 
http://www.midominio.com/servicios/software.html. Esto se aplica también a 
las imágenes que deseamos que se visualicen en el boletín. Por ejemplo, si quere- 
mos incluir el logo de nuestra empresa (logo.jpg, por ejemplo) y éste se encuentra 
en la carpeta imágenes de nuestro sitio, para incluirlo debemos colocar en el coman- 
do SRC= del tag <IMG> la ruta de Internet hacia ese archivo, <IMG SRC="http://www. 
midominio.com/imagenes/logo.jpg”>. Es muy común que, para realizar la suscrip- 
ción a los boletines electrónicos, tengamos que incluir en nuestro sitio un formu- 
lario de suscripción. Algunos de los programas desarrollados para la creación de 
boletines electrónicos también incluyen la característica de agregar este tipo de for- 
mularios a nuestra página web, generando también una lista de correo y enviando 
los mensajes según la frecuencia que nosotros determinemos. 

Un ejemplo es HTML Butlletin's Crieitor, un programa totalmente gratuito dedi- 
cado a la creación y distribución de mensajes de correo con formato de boletines 
electrónicos y también a generar listas de correo para su distribución. Podemos des- 
cargarlo desde www.ieslacostera.org/esoftware/butlleti. 
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Figura 11. Con HTML Butlletin's Crieitor podremos codificar 
nuestros boletines fácilmente y enviarlos por correo electrónico. 


En RESUMEN 


Saber cómo promocionar nuestros sitios y los servicios, productos y novedades de sus pá- 
ginas será un proceso imprescindible para generar nuevos clientes y mantener los ya ob- 
tenidos, ofreciéndole a estos últimos mayor funcionalidad y agilidad para encontrar conte- 
nidos, como también brindar nuevos servicios de información y publicidad. En este último 
capítulo hemos analizado todas las alternativas para cumplir estos objetivos. 
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TEST DE AUTOEVALUACIÓN 


1 Explique las diferencias entre buscadores 


tipo índice y motor de búsqueda. 


N 


Explique paso a paso la forma de registrar 


nuestras páginas en el buscador Yahoo!. 


3 Explique paso a paso la forma de registrar 


nuestras páginas en el buscador Google. 


4 ¿Qué son las palabras clave? 


Explique la manera de agregar META tags 


mediante código y con Dreamweaver. 


6 ¿Qué es GoogleRank? 


7 ¿Para qué sirve Yahoo! Site Explorer? 


8 ¿Qué función cumple Google AdWords? 


9 ¿Qué es un banner? ¿Cómo se denominan 


según su formato? 


10 ¿Para qué nos servirá implementar los bo- 


letines electrónicos? 
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Y ACTIVIDADES 


EJERCICIOS PRÁCTICOS 


Y Averigue en Internet si existen herramien- 
tas para registrarse en varios buscadores 


en un solo proceso. 


Y Agregue una página que ya esté creada y 


publicada en Yahoo!. 


Y Agregue una página que ya esté creada y 


publicada en Google. 


Y Diseñe un banner y busque en Internet un 
servicio de intercambio de banners. Aplique 


este sistema en uno de los sitios publicados. 


Y Investigue con profundidad las funciones de 
HTML Butlletin's Crieitor y desarrolle un bo- 


letín con las novedades de uno de sus sitios. 


CREACIÓN DE SITIOS WEB Apéndice A 








Bases de datos 


Hasta ahora, si bien hemos analizado 
algunas alternativas que necesitaremos 
pagar para el diseño y nuestro servidor, 
muchas de las aplicaciones, herramientas 
y servicios que hemos analizado han sido 
gratuitos y de libre distribución. 

Éste es también el caso de MySQL Server, 
una de las mejores herramientas 

para implementar bases de datos 

en nuestros sitios, que presentaremos 


-de manera sucinta- en este apéndice. 


¿Qué es una base de datos? 
El servidor 

El lenguaje SQL 

MySQL 

Manipulación de las bases 
de datos 
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¿QUÉ ES UNA BASE DE DATOS? 


Una base de datos es un conjunto de información estructurada independientemen- 
te de su uso y aplicación, que se almacenará en la memoria auxiliar de un servidor. Per- 
mite un acceso directo en tiempo real a los datos que contiene y establece métodos 
de interacción con un grupo de aplicaciones para manejar esos datos. Dentro de las 
principales ventajas que ofrecen las bases de datos, podemos destacar la independencia 
de los datos y su tratamiento, lo que significa que el cambio de datos no implica el 
cambio en programas y viceversa. Esto también induce a un menor costo de mante- 
nimiento. Otra ventaja es la coherencia en los resultados, ya que la implementación 
de un sistema de base de datos disminuye la redundancia en el acceso de los datos por 
parte de los usuarios. Esto engloba la respuesta en acciones lógicamente únicas y una 
menor inconsistencia en los datos. También lograremos una mejora en la disponibi- 
lidad de los datos, ya que no tienen un dueño exclusivo (esto no significa que sean 
públicos), y podremos establecer un método de almacenamienxto más eficiente. 


EL SERVIDOR 


Con respecto al servidor de bases de datos que hemos seleccionado para adminis- 
trarlas, al igual que muchos de los programas y servicios que hemos desarrollado en 
este libro, es gratuito y se puede decir que, junto a SQL Server de Microsoft, es 
uno de los programas más populares en el ámbito de las bases de datos. 

A través de las siguientes páginas, vamos a presentar algunas de las características 
básicas de MySQL Server, así como la forma más adecuada de instalarlo y utilizar- 
lo básicamente. Pero antes de eso, será necesario tener nociones básicas sobre qué 
es y qué función cumple una base de datos en un servidor web, cuál es su estruc- 
tura básica y cuál es el lenguaje en el que se basan para su administración. 


Modelos de base de datos 

Dentro de la clasificación de las bases de datos, existen tres modelos disponibles 
para su diseño. Esto también definirá la forma de organización que se planteará en 
cuanto a los datos: el modelo jerárquico, el modelo de red y el modelo relacional. 
Conozcamos las propiedades de cada uno. 


e Modelo jerárquico: en este modelo se pueden presentar dos tipos de relacio- 
nes entre los datos: de uno contra uno y de uno contra muchos. 

e Modelo de red: en este caso se puede aplicar la relación de muchos a muchos. Por 
ende, cualquier registro de la base de datos puede poseer más de una concurrencia en 
niveles superiores. Este modelo evita que se produzcan redundancias en los datos. 


El lenguaje SQL 


e Modelo relacional: es el más utilizado en las prácticas actuales. Su principal 
característica es su uso sencillo de entender para los usuarios principiantes. 


Propiedades de . 
Relación 2 
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p Relación 5 pelación ô 


REGISTRO 1 
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Figura 1. El modelo relacional propone relación 
entre todos los datos y propiedades para ambos elementos. 


Campos de datos 

Las bases de datos organizan su información según una estructura general que 
las identifica. Cada base de datos está compuesta por tablas donde se almacena- 
rán los registros, que a su vez serán catalogados en función de los diferentes 
campos. Los campos son las características o propiedades de los datos. 

Un campo puede poseer diversos valores, que deben ser identificados por la ba- 
se de datos. Esta identificación acelerará posteriormente los procesos de búsque- 
da de datos y optimizará los procesos en memoria. 

Cada base de datos puede contener valores diversos y específicos, pero existe una 
clasificación estándar de estos valores, mediante la cual podemos destacar los da- 
tos alfanuméricos (letras y números, con un límite de longitud de 255 caracte- 
res), los numéricos (pueden ser enteros, decimales, etc.), los booleanos (verda- 
dero o falso), las fechas (permitirán ordenar los registros según las fechas o rea- 
lizar cálculos de días, meses, años, etc.), los memos (datos alfanuméricos no in- 
dexables), y los autoincrementables (poseen la condición de poder aumentar el 
valor de un registro en uno y se basan en números enteros). 


EL LENGUAJE SQL 


El SQL (Structured Query Language) es un conjunto de sentencias estándar de- 
sarrollado exclusivamente para el tratamiento de información en bases de da- 
tos. Esto quiere decir que se trata de un lenguaje de programación dedicado a 
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unificar todas las alternativas de los diferentes lenguajes y las diversas opciones 
en cuanto a bases de datos, mediante una serie de comandos comunes y prede- 
finidos. Esto lo convierte en el sistema de programación universal en bases de 
datos. Debido a que existen múltiples lenguajes de programación y bases de da- 
tos, sería muy complejo gestionar la información si SQL no existiera. 


SQL tiene como principal característica el hecho de poder establecer óptimas co- 
municaciones (tanto envío como recepción de datos) con cualquier sistema di- 
námico de programación de servidores, como ASP o PHP (es bastante más 
compatible con este último), combinándolos con cualquier tipo de bases de da- 
tos (MS Access, SQL Server, MySQL, etc.). 

A pesar de ser un lenguaje estándar, no posee las mismas características para to- 
das las bases de datos. Es decir que cada clase de base de datos puede incluir op- 
ciones determinadas y específicas que pueden no funcionar en otras. 


Breve historia de SQL 


La primera versión del lenguaje SQL fue desarrollada por IBM y se basó en un 
modelo temático propuesto por el Dr. E. E. Codd, quien se especializaba en el 
almacenamiento y la recuperación de datos. Este proyecto luego se convertiría en 
el modelo relacional de datos, del que ya hemos hablado. El primer software 
en usar este tipo de modelo mediante el lenguaje SQL fue Oracle: el primer 
RDMS (Relational Database Management System) del mercado. 

En el año 1981, IBM desarrolló su primer software de gestión de bases de datos 
propio, denominado SQL/Data System (SQL/DS), que posteriormente se de- 
nominaría Database 2 (DB2), lanzado en el año 1983. 

Teniendo en cuenta la popularidad de este sistema, en el año 1986 el ANSI 
(American Nacional Stardards Institute) aceptó como estándar al lenguaje SQL, 
con las posteriores actualizaciones en los años 1989, 1992, 1999 y 2003. SQL se 
había convertido en el lenguaje de bases de datos por excelencia, convirtiéndolo 
en lo que es hoy: un lenguaje de programación para bases de datos autónomo y 
que no necesita ningún otro software ni plataforma específica para actuar. 


MYSQL 


MySQL es una de las aplicaciones más usadas en servidores web para la adminis- 
tración de bases de datos. Originalmente fue desarrollada para plataformas 
UNIX/Linux, pero con la estandarización se transformó en una herramienta 
fundamental, también en servidores Windows. Una de sus principales ventajas 
es que es un software de código abierto, es decir, de libre distribución. 
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En cuanto a sus características técnicas, podemos destacar su velocidad, estabili- 
dad y facilidad de uso, comparándola con otros administradores de DB. 

Como ya sabemos, una base de datos es un conjunto de datos estructurados en 
tablas, registros y campos. Puede ser desde un sencillo listado de productos has- 
ta una infinita cantidad de información de una gran empresa corporativa. La 
función de MySQL es actuar como administrador de esos datos, permitiéndonos 
agregarlos, modificarlos, eliminarlos y acceder a ellos, para que luego el usuario 
final pueda consultarlos. Para todo esto, MySQL utiliza como estructura en sus 
bases de datos el modelo relacional, que indexará los datos en tablas. Esto es lo 
que hace que MySQL sea rápido y flexible, haciendo posible conectar una tabla 
con otra mediante la definición de diferentes 
relaciones, permitiendo a su vez vincular ca- 
da dato pedido por el usuario. 


Figura 2. MySQL Server es uno de los servidores 





de bases de datos más utilizados en la actualidad. 


¿Por qué usar MySQL? 

Simplemente por tres factores que lo caracterizan: su velocidad, su estabilidad 
y su facilidad de uso. Si deseamos incorporar a nuestro servidor web una com- 
pleta herramienta para contar con infinitas posibilidades de interacción con el 
usuario (por ejemplo, sistemas de validación, foros de discusión, libros de visi- 
tas, etc.), MySQL Server será la mejor opción. 

Su conectividad y seguridad de alto nivel podrán garantizarnos un completo 
sistema de almacenamiento masivo de datos permanentes, para que los usuarios 
que ingresen en nuestras páginas disfruten de una gran cantidad de servicios y 
puedan ser, entre otras cosas, reconocidos por nuestro servidor o guardar los da- 
tos que deseen en nuestras bases de datos. 


Obtener MySQL 


Como ya dijimos, MySQL es una herramienta de código abierto. Esto quiere de- 
cir que su código fuente puede ser descargado de Internet, modificado y distri- 
buido por cualquier usuario de la red. 

En la mayoría de los casos también implica que el producto final sea gratuito, co- 
mo es el caso de algunas versiones de MySQL. Para poder obtener alguna de ellas 
tendremos que acceder al sitio oficial del programa (www.mysql.com), donde 
contaremos con la opción de comprar el producto completo en dos diferentes ver- 
siones (Network Basic y Gold Edition), que incluyen características adicionales 
a la gratuita, como actualizaciones, licencia comercial, garantía y soporte técnico. 
La versión de descarga gratuita es denominada Community Edition (edición 
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comunitaria), y la podemos descargar desde el sitio http://mysql.localhost.net. 
ar/downloads/mysql/5.0.html. Ésta es la última versión estable del software 
(5.0), y también podemos descargarla mediante FTP, con lo que evitaremos erro- 
res de archivo en la descarga y obtendremos mayor seguridad en ella. Las diferen- 
tes versiones de MySQL disponibles las podemos encontrar en el sitio FTP 
ftp://ftp.rediris.es/mirror/mysql/Downloads. 


En cuanto al sitio web, también contamos con la posibilidad de descargar gra- 
tultamente algunas herramientas complementarias a MySQL, como MySQL 
Administrador (administración gráfica del servidor MySQL) o MySQL Migra- 


tion Tool (permite migrar bases de datos desde y hacia otros formatos). 
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Figura 3. El sitio de MySQL nos ofrece varias alternativas para obtener el producto. 


En nuestro caso, trabajaremos con la versión gratuita (Community Edition), 
que descargaremos mediante alguno de los métodos antes mencionados. 
Cuando haya finalizado la descarga, ejecutaremos el archivo obtenido. Al reali- 
zar esto, comenzará un asistente que nos guiará durante todo el proceso de ins- 
talación de la aplicación. También puede suceder que, al descargar alguna de las 
versiones estables, no contemos con un archivo instalador sino que la descarga 
se trate de un archivo comprimido. En este caso, lo más probable es que dentro 
de ese archivo se encuentre el directorio completo del programa, y lo que con- 
viene hacer es extraer todo su contenido en la carpeta C:Amysql, que será el direc- 
torio del programa en el que luego comenzaremos a trabajar. Pero veamos pri- 
mero el proceso de instalación de la versión 5.0 de MySQL. 
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E instalar MySQL PASO A PASO 


E] Al ejecutar el instalador, la primera pantalla del asistente le dará la bienvenida. 





E MyS50L Server 5.0 - Setup Wizard 
| Welcome to the Setup Wizard for WMySQL 


Server 5.0 


The Setup Wizard will install MySQL Server 5,0 release 5.0,23 
on our computer, To continue, click Mext, 


WARNING: This program is protected by copyright law, 


Cancel 





A Luego debe seleccionar el tipo de instalación que va a realizar. Es recomenda- 
ble que elija Complete (completa). 


15 MySOL Server 5.0 - Setup Wizard 


Setup Type 


Choose the setup type that best suits your needs, 


Please select a setup type, 


5 Typical 


— Common program features will be installed. Recommended For 
' general use, 


Complete 


-i All program features will be installed. (Requires the most disk. 
T AA space.) 


Choose which prograrn Features you want installed and where they 
will be installed, Recormmended for advanced users, 
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» 


Para que comience la copia de archivos y los demás procesos de instalación, 
presione el botón Install. 


5 MySQL Server 5.0 - Setup Wizard 


Ready to Install the Program 


The wizard is ready to begin installation. 


If ou ant to review or change any of our installation settings, click Back, Click Cancel to 
exit the wizard, 


Current Settings: 
setup Type: 


Complete 


Destination Folder: 
Cuárchivos de programalMySGLMySQL Server 5,01 





4 El instalador le mostrará los progresos a través de diferentes barras. 


13 US TO IA 


Installing MySQL Server 5.0 


The program Features you selected are being installed, 


Please wait while the Setup Wizard installs MySQL Server 5.0, This may take 
several minutes, 


Status: 


(AAA AAA ) 


Cancel 
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» 


El Luego se le pedirá registrarse en MySQL.com. Saltee este paso seleccionado 
la opción Skip Sign-Up. 


MySOL.com Sign Up - Setup Wizard 


MySQL.com Sign-Up 


Login or create a new MySQL.com account, 


Please log in or select the option to create a new account, 


O Create a new free MySQL.com account 


IF vou do not yet have a MySQL. com account, select this 
option and complete the Following three steps, 


O Login to MyS0)L.com 


Select this option if you already have a MySQL.com account, 
Please specify your login information below, 





























Email address: 





























Password: | 


o Sign-Up 





EJ Marque la casilla Configure the MySQL Server now y presione Finish para ter- 
minar la instalación. 


15 MySOL Server 5.0 - Setup Wizard 
Wizard Completed 


Setup has Finished installing MySQL Server 5,0, Click Finish to 
exit the wizard. 


Configure the MySQL Server now 


Use this option to generate an optimized MySQL config 
file, setup a Windows service running on a dedicated port 


and to set the password For the root account, 


Finish 
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Las propiedades del servidor 

Para que nuestro servidor de bases de datos funcione bien y sea aplicado correc- 
tamente al sistema, tendremos que configurar algunas de sus opciones, instalan- 
do la base de datos principal, el servidor, el usuario administrador (root) y esta- 
bleciendo algunas propiedades, como las contraseñas, los puertos, la instalación 
de MySQL como servicio o su nombre. 

Para lograr esto, si contamos con la versión instalable de MySQL para Windows, 
contamos con un práctico asistente de configuración que nos guiará por todos 
estos procesos de manera automatizada. Por el contrario, si descargamos una ver- 
sión de MySQL que no es instalable sino extraíble, utilizaremos las configura- 
ciones que veremos más adelante. 

Recordemos que para poder acceder al asistente de configuración de la versión 
instalable de MySQL, podemos hacerlo si activamos la opción Configure the 
MySQL Server now en el asistente de instalación del programa, o bien podemos 
acceder mediante el menú Inicio/Todos los programas/MySQL/MySQL Server 5.0/ 
MySQL Server Instance Config Wizard. 


E Configurar MySQL NAO AO 








mo Se le dará la bienvenida al asistente. 


MySOL Server Instance Configuration Wizard 


Welcome to the MySOL Server Instance 
Configuration Wizard 1.0.8 


The Configuration Wizard will allows vou to configure the 
MySQL Server 5,0 server instance. To Continue, click. 
Mext, 


Cancel 





El Luego seleccione la opción Standard Configuration (configuración normal). 


» 
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MySOL Server Instance Configuration Wizard 


MySQL Server Instance Configuration 


Configure the MySQL Server 5,0 server instance, 


Please select a configuration type. 


O Detailed Configuration 


(1% Choose this configuration type to create the optimal server setup For 
: this machine, 


g Configuration 


-E Use this only on machines that do not already have a My5QL server 
installation, This will use a general purpose configuration For the 
server that can be tuned manually. 





En el cuadro posterior marque la opción Install As Windows Service (permite 
instalar el programa como servicio de Windows) y configure el nombre que 
desea darle al servicio. 


MySOL Server Instance Configuration Wizard 


MySQL Server Instance Configuration 


Configure the MySQL Server 5,0 server instance, 


Please set the Windows options, 


Install As Windows Service 


a 
pmi 
pr 


q This is the recommended wavy bo run the Mys5QL server 
AE on Windows, 


Service Mame: 


Server automatically 


Check this option Eo Myo 
server | client exercitar mn Ls E 
so they can be called From the cormmard line, 
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» 
ES Marque Modify Security Settings para poder establecer la contraseña del usua- 
rio administrador del servicio (root). 


MySOL Server Instance Configuration Wizard 


MySQL Server Instance Configuration 


Configure the MySQL Server 5,0 server instance, 


Please set the security options, 


Modify Security Settings 


$ Mew root password: EEREN Enter the root password. 
[ root | FRERE 


Confirm: Retype the password, 


[| Enable root access From remote machines 


[] Create ån Anonymous Account 


This option will create an anonymous account on this server, Please 
note that this can lead to an insecure system. 





| < Back | | atn | | Cancel | 


El El proceso de configuración tomará algunos minutos para completarse. 
Aguarde y presione Finish para terminar. 


gl Luego puede acceder a Inicio/Todos los programas/MySQL/MySQL Server 
5.0/MySQL Command Line Client para introducir comandos en el servidor. 


MySQL Server Instance Configuration 


Configure the MySQL Server 5,0 server instance, 


Processing configuration 


Prepare configuration 


3 
w write configuration file (Crarchivos de programalMySQUpMlySQL Server 5 Ori in 
wi Start service 

> 


Apply security settings 
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MANIPULACIÓN DE LAS BASES DE DATOS 


A partir de ahora comenzaremos a analizar cómo trabajar sobre nuestras bases de 
datos. Explicaremos todos los procedimientos para crearlas, agregarle tablas, colum- 
nas e índices, pasando por todos los procedimientos intermedios para cada uno de 
estos componentes: cómo mostrarlos, adicionarles elementos, eliminarlos, etc. 
Para que todos estos procesos sean más prácticos, los aplicaremos sobre las versio- 
nes extraíbles de MySQL, y no sobre la instalable. Igualmente, podremos trabajar 
sobre este tipo de versiones ingresando en la carpeta de programa correspondiente. 
Podemos descargar cualquiera de las versiones extraíbles desde la página de descar- 
gas del sitio oficial de MySQL o también desde el sitio FTP detallado anteriormen- 
te. Los archivos poseen el formato ZIP y podemos identificar que se trata de una 
versión no instalable porque dentro de su nombre suele contener el término noins- 
tall. La versión que utilizaremos en nuestro caso es la 5.1 Beta. Recordemos que 
tendremos que extraer todos los contenidos de este archivo comprimido en la car- 
peta C:Imysql. Éste será nuestro directorio de trabajo predeterminado. 


El inicio 

Una vez que tengamos descomprimido MySQL en C:Ymysql, podremos comenzar 
a trabajar. Esto sólo será posible desde el símbolo del sistema de Windows XP, es 
decir, que nos manejaremos dentro de una línea de comandos, y lo único que ma- 
nipularemos son directivas, y no un entorno gráfico determinado. Para acceder a 
la línea de comandos de Windows, recordemos que debemos ir a Inicio/Todos los 
programas/Accesorios/Simbolo del sistema. 

Cuando ya estemos en la ventana de la línea de comandos, lo primero que debemos 
hacer es salir de la carpeta de usuario e ingresar en el directorio de aplicaciones de 
MySQL. Para lograr el primer paso introducimos el comando CD Y, y para lo segundo, 
CD mysqlbin, por lo que quedaremos ubicados en la carpeta bin dentro de C:Ymysal. 


SSA 


Microsoft Windows XP [Versión 5.1.2600] 
<C> Copyright 1285-2801 Microsoft Corp. 


C:\Documents and SettingsNDeepcold>cd N 
C:\>cd mysqlNbin 


AAA ADA 





Figura 4. El símbolo de sistema nos servirá 
para ingresar en la consola de administración de MySQL. 


Abrir el servicio 
Ya ubicados en el directorio de ejecución de MySQL, debemos justamente ejecu- 
tar el servidor, indicando nombre de usuario y contraseña. Para ello tenemos que 
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introducir el comando mysql, seguido de los modificadores -u usuario (donde 
usuario será nuestro nombre de usuario, generalmente root) y -p contraseña 
(donde contraseña será el password establecido en el archivo de configuración). 
La totalidad de la directiva será mysql -u usuario -p contraseña. Si no hemos es- 
tablecido ninguna contraseña para el usuario, no debemos incluir el comando -p. 
Una vez ejecutado este comando, ingresaremos en el servicio MySQL. El prompt 
de la línea de comandos se transformará de C:\mysql\bin> a mysql>. Desde allí co- 
menzaremos a trabajar sobre nuestras bases de datos, a través del lenguaje SQL. 


E ISS f 


icrosoft Windows XP [Versión 5.1.2600] 
<C) Copyright 1985-2001 Microsoft Corp. 


:\NDocuments and Settings\NDeepcold>cd N 
DP ESTAS 


Ci:N\mysqglNbin >n. 





Figura 5. Para abrir el servicio MySQL debemos ingresar el comando mysql -u. 


Trabajar con bases de datos 

Desde ahora comenzaremos a analizar los comandos básicos del lenguaje SQL en 
un servidor MySQL. Algo que tenemos que tener bien presente es finalizar todas 
nuestras sentencias con el símbolo ; o el comando \g. Sin alguno de ellos, la direc- 
tiva no será reconocida como un comando interno de MySQL y no se ejecutará. 
Comencemos viendo la manera de crear una nueva base de datos en nuestro ser- 
vidor. Para ello debemos ejecutar la sentencia create database nombre; (donde 
nombre será el nombre que deseamos darle a la base). 


=x Simbolo del sistema - mysql -u root E 


Microsoft Windows XP [Versión 5.1.2600] 
<C> Copyright 1985-2061 Microsoft Corp. 


¿ADocuments and SettingsDeepcold>cd N 
DS ISA A 
DATA AID -u root 


Jlelcome to the MySQL monitor. Commands end with 3 or Mg. 
our MySQL connection id is 16 to server version: 5.1.9-heta 


ype *help;5* or *5h* for help. Type *5c* to clear the buffer. 


mysql> create database USUARIOS; 
Query OK, 1 row affected (0.43 sec? 


TD m 





Figura 6. Funcionamiento del comando create database. 
Luego, para poder trabajar sobre esa base que creamos, tendremos que conectar- 
nos a ella mediante el comando connect base: (donde base es el nombre de la ba- 


se a la que deseamos conectarnos). 
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o Simbolo del sistema - mysql -u root 


icrosoft Windows XP [Versión 5.1.2600] 
<C> Copyright 1985-2061 Microsoft Corp. 


:\NDocuments and Settings\NDeepcold>ècd N 


DO ESTAS LI) 


UAT EAT 
lelcome to the MySQL monitor. Commands end with ; or g- 
our MySQL connection id is 16 to server version: 5.1.9-beta 


ype AS for help. Type *Nc? to clear the buffer. 


ysql> create database USUARIOS; 
Query OK, 1 row affected (0.43 sec? 


ysql> connect USUARIOS; 
onnection id: 1 
urrent database: USUARIOS 


vusgql> m 





Figura 7. Funcionamiento del comando connect. 


Para poder saber con cuántas bases contamos y el nombre de cada una (servirá 
para poder conectarnos a ellas y manipularlas), podemos introducir el comando 
show databases;. En el símbolo del sistema se nos mostrará una tabla con todas 
las bases de datos disponibles en el servidor. En nuestro caso, contamos con seis 
bases de datos diferentes con las que podemos trabajar. De todos modos, nos ba- 
saremos en la recientemente creada: usuarios, ya que está limpia y podemos crear 
y eliminar elementos a nuestro gusto. 


SBS CIAO IT 


AUT AT 
delcome to the MySQL monitor. Commands end with ; or sg. 
our MySQL connection id is 18 to server version: 5.1.2%-hbeta 


vpe *help;3*? or * 5h? for help. Type *5c* to clear the buffer. 


ysq1> connect USUARIOS; 
onnection id: 19 
urrent database: USUARIOS 


ysql> show databases; 


information_schema 
cluster 


pablo 
test 


J 
J 
i 
' 
mysql i 
i 
L 
J 
usuarios i 


6b rows in set A A sec? 


Ta m 





Figura 8. Funcionamiento del comando show databases. 


Finalmente, contamos con el comando drop, que nos servirá para eliminar elemen- 
tos dentro del servidor. En este caso, al tratarse de la base de datos en sí, debemos 
modificarlo con el comando database nombre; (donde nombre es el nombre de la 


os — 
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base de datos que se va a borrar). Esto indica al comando drop que estamos borran- 
do una base de datos completa y su nombre. Por lo tanto, la sentencia completa 
quedaría como drop database nombre;. El comando drop también nos servirá para 
eliminar los componentes de una base de datos, como las tablas y sus índices. 


SS del sistema - mysql -u root 


ysql> connect USUARIOS; 
onnection id: ud 
MSIE AENA 


ysql> show databases; 
+ 


ı information_schema i 
a EA S i 
ESA 
i pablo 
i test 
¡ usuarios 
a 
6 rows in set E TD 


ysql> drop database pablo; 
Query OK, 1 row affected (0.44 sec? 


vusgql> m 





Figura 9. Funcionamiento del comando drop database. 


Las tablas 

Una vez que nos hayamos conectado a la base de datos, podremos comenzar a trabajar 
sobre sus tablas y sus columnas. Para crear una tabla con determinada cantidad de co- 
lumnas, usaremos el comando create table nombretabla (donde nombretabla es el nom- 
bre que asignaremos a la tabla). En este caso no finalizaremos la sentencia con ;, ya que 
debemos especificar en la línea siguiente todas las columnas que tendrá la tabla. Para 
ello, en la línea inferior que parece al ejecutar el comando, colocamos la especificación 
de las columnas: (col1 propiedad, col2 propiedad). En este caso, col1 sería el nombre de 
la primera columna y col2, el de la segunda, y el término propiedad se refiere a un co- 
mando específico que aplicará determinada característica sobre la columna. 


AJO AMIA ATA EJEMPLO 

BIT Valores de bits. BIT(8) 

BOOLEAN Sinónimo de TINYINT. ID_ Invitado BOOLEAN UNSIGNED NOT NULL 
TINYINT Números enteros muy pequeños. ID_Administrador TINYINT UNSIGNED NOT NULL 
SMALLINT Números enteros reducidos. ID_Usuario SMALLINT UNSIGNED NOT NULL 
MEDIUMINT Números enteros de tamaño mediano. ID_Persona MEDIUMINT UNSIGNED NOT NULL 
INT Números enteros. ID_Grupo INT UNSIGNED NOT NULL 

INTEGER Sinónimo de INT. ID_Usuario INTEGER UNSIGNED NOT NULL 
BIGINT Números enteros de gran tamaño. ID_Establecimiento BIGINT UNSIGNED NOT NULL 
DOUBLE Número de coma flotante. ValorGenerico DOUBLE 

FLOAT Número de coma flotante pequeño. Estatura FLOAT 

DECIMAL Número de punto fijo exacto y empaquetado. Salario DECIMAL(b,2) 

NUMERIC Cualquier formato numérico. Integrantes NUMERIC(10) 
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TIPO DE DATO AMO ATA EJEMPLO 
CHAR Formato de caracteres. Apellido CHAR(40) NOT NULL 
VARCHAR Cadena de caracteres de longitud variable. Nombre VARCHAR(30) 
BINARY Cadenas de datos binarios. Dato BINARY 
DATE Formatos de fecha. Ingreso DATE 
TIME Formatos de hora. Actualización TIME 
TIMESTAMP Marca de hora temporal. MarcaTiempo TIMESTAMP 
DATETIME Fecha y hora. Creacion DATETIME NOT NULL 
YEAR Formato de año. Nacimiento YEAR 
TINYBLOB Columna BLOB con longitud máxima de 255 bytes. TextoAdjunto TINYBLOB 
BLOB Columna BLOB (cualquier tipo de contenido, como Contenido BLOB 

imágenes, documentos Word, etc.) con longitud 

máxima de 16,777,215 bytes. 
MEDIUMBLOB Columna BLOB con longitud máxima de 65,535 bytes. Imagen MEDIUMBLOB 
LONGBLOB Columna BLOB con longitud máxima de 4 GB. DatosAdjuntos MEDIUMBLOB 
TINYTEXT Columna TEXT con longitud máxima de 255 caracteres. Comentario TINYTEXT 
TEXT Formatos de texto. DatoAdicional TEXT 
MEDIUMTEXT Columna de texto con longitud máxima Historia MEDIUMTEXT 

de 65,535 caracteres. 
LONGTEXT Columna de texto con longitud máxima de 4 GB Leyenda LONGTEXT 

de caracteres. 
ENUM Enumeraciones de elementos. Administrator ENUM( VERDADERO’, 

‘FALSO’) NOT NULL 

SEI Conjunto de opciones. SET sort_buffer_size=10000 


Tabla 1. Podemos establecer diferentes tipos de datos como propiedades de cada columna. 


cx Símbolo del sistema - mysql -u root 


ysql> 
=> 


create table argentina< 
nombre varcharí20>,. 
ETAGE ORES ES AD 
ORL EELA ELDA 


Query OK. O rows affected (0.06 sec? 


ysql> 





Figura 10. Funcionamiento del comando create table. 


Luego, para poder visualizar el contenido de la base de datos, es decir, todas las tablas 
que contiene, utilizaremos el comando show tables;. Se mostrará una lista con todas 
las tablas de la base de datos, al igual que con el comando show utilizado para la base 
de datos en su totalidad. También podremos ver el contenido de la tabla usando el co- 
mando describe nombre; (donde nombre es el nombre de la tabla para visualizar). 
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SS BES CIAO IT 


ysql> show tables; 


+ 
A row in set ES TD 


ysqgql> describe argentina; 


varchart(2M> 
varchar<(2MB> 


nombre 

apellido 

nacimiento 
EN e e e a o e ce cs e as cs a 


rows in set <(M.B1 sec? 


$e amo qe 
q e 
E E 
E E 
$ anna q o. 


yusql> 





Figura 11. Funcionamiento del comando show tables. 


También podremos agregar datos a las columnas de una tabla posteriormente a su 
creación. Podemos lograrlo mediante el uso del comando insert into tabla values 
(“valor1”,”valor2”,“valor3”); (donde tabla es el nombre de la tabla en la que estamos 
trabajando y valor serán los campos que se van a adicionar). Para poder ver los re- 
sultados, podemos utilizar el comando select * from tabla; (donde * representa la 
totalidad de contenidos y tabla, el nombre de la tabla que queremos visualizar). 


ex Símbolo del sistema - mysql -u root 


z\mysqglNbin>mysql -u root 
lelcome to the MySQL monitor. Commands end with ; or g- 
our MySQL connection id is 392 to server version: 5.1.9-heta 


ype AS for help. Type *Nc? to clear the buffer. 


ysql> connect usuarios 
onnection id: Ein 
urrent database: usuarios 


ysq1> create table argentina< 
O MIE OA 
-> apellido varchar<2M>, 
-> nacimiento date); 

Query OK., O UT TA sec? 


yvsql1> insert into argentina values <*Pedro? ,*Goncaluves” ,*1976/6/22” >; 
Query OK, íi row affected A sec? 


ysql> select * from argentina; 


a 
nacimiento i 
o o cs cs ce e cs cs cs cs ce ca, EN 


1976-46-22 i 
g 





Figura 12. Funcionamiento del comando insert. 


RA RESUMEN 


En este apartado descubrimos un nuevo aspecto dentro de Internet: las bases de datos. Basándo- 





nos en el modelo relacional de datos, vimos las características fundamentales, tanto de las bases 
de datos como del lenguaje mediante el que podemos programar su manipulación. También 
aprendimos a utilizar el servidor de bases de datos más popular y sus comandos principales. 
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JItIOs y 
programas 
recomendados 


En este apéndice presentamos una lista de 





sitios que ofrecen complementos para el 
desarrollo de nuestros sitios y servidores. 
Por ejemplo, recursos web (scripts, 
fuentes, etc.) que nos servirán para añadir 
funcionalidad y diseño a nuestras paginas, 
o programas que nos proporcionan 
soluciones, como clientes FTP o 


aplicaciones que facilitan el diseño. 


SERVICIO DE ATENCIÓN AL LECTOR: lectoresQmpediciones.com 


Apéndice ` 


Guía de sitios 


HotScripts 

Recursos gratis 

FatScripts 

Seripts.com 

Free Webmaster Resources 
(thefreecountry.com) 
Creamundo 

LetraManía 

Fuentes de recursos gratis 
Font Reactor 

101 Free Fonts 

DaFont 

Free Fonts 

Free Web Templates 
Templates Box 


Software recomendado 


SmartFTP 
CuteFTP 

FIP Explorer 
BulletProf FTP 
Core FTP 
Swish 
Arachnophilia 
Alleycode 
Amaya 

GIMP 
IrfanView 
Image After 
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303 
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303 
304 
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GUÍA DE SITIOS 


HotScripts 


URL: www.hotscripts.com 


a ic A a E 


A A e 


Mi rara E ad o DUO 

TEN caa a TE bhen iden 
WE dona ct 10m SRN dmim cih W pip niin 
3) Prisa 000 MO pericia do, MO Tod el A A 
W iner E aa a 


A YAA -= jimm i 


E AA L a A O mba AI 





Aquí encontraremos una gran cantidad de aplicaciones extra en diferentes formatos 
de scripts, como PHP, ASP XML, Java, JavaScript, etc. Además, encontraremos do- 
cumentación muy útil y programas para implementar las descargas que realicemos. 


Recursos gratis 


URL: www.recursosgratis.com 


dife Eds Te Pri Pere de 
Ga 0-1 2 de... 
dl e ee air a ia 


Conplla Edi la propician de ld bei y Se tdo li Caña en paramo. A 


Boletin de 
Hoyedades 





Este sitio nos ofrece una gran cantidad de recursos para nuestras páginas web: iconos, 


imágenes, fuentes tipográficas, templates, scripts y otros complementos para hacer de 
nuestras páginas un elemento visual llamativo y profesional. Está en español. 
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FatScripts 


URL: www.fatscripts.com 


1 A A RA A AE 
Baches Edo Ye Feito Premia Apaña 


% h à, 
ea + nj (a La 


E hH liria aiinpti cora 








Este sitio es similar a HotScripts. Quizá brinda una menor cantidad de recursos que 
éste, aunque FatScripts nos da la ventaja de poder subir nuestros propios scripts al 
sitio sin la necesidad de ser usuarios registrados. Podemos encontrar PHP, ASP, 
Flash, Coldfusion, Perl, Pitón, etc. En este caso, el sitio está en inglés. 


Scripts.com 


URL: www.scripts.com 


Fst A A A AA RAS EE AT 


= 


O SADA Ras Lnph Ary [us] 
AAA 
22 Mires Erin rie 





phpFoX Portal 


CREATE OMLIME CORA AA TES, 


a y 


ru ioraed 


il J dura da 14500 cria ti reinpi 
AEP MT Sinia | ad III miat iit 

AEF Tonpëe 

C ahi Cre irati 


LJ Peri teripi 
FREE 
subscription to 


AXIOM 


000000 


Tecla sad Uhtas iong =~ m m 





E 


Este es, quizás, el sitio más completo en cuanto a ejemplos de scripts y aplicaciones web 
adicionales para nuestros sitios. Contamos con casi todos los lenguajes compatibles con 
HTML y un ágil método de navegación y descarga. 
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Free Webmaster Resources (thefreecountry.com) 


URL: www.thefreecountry.com/webmaster/ 


A E MAT Al 
Bahe  —Edcon Ye è Peai hem Apaña 


Qes- E 2] Ey Eiaa 
A 


thefreecouncry Free Webmaster Resources 
«Lom Free Senpta, Web hosting, Software, Design, Tutorials, DNS, ete 


oy ar hora Dareccouni oom page -> Jo ULN ISLE y 


whats new on this-site 
2 July 2006 
umian inctory ot ine 
wina hra Necro tes ve Mira ri 10 FEE ESO PCER a Hrm pam Fer gaH ague ed Temer 
(iir wetraile i añ e depen ut aa ml 
hacha, 26 script, PHA eran dont, DHT. a My pirt rÉ looking ia t ten Me seculty üi yo 
5 scripts. Jana apclota. Tonma, memeh eniging FTP computer Tio rrabwire anier Mer aytem 
Dl sotare, el lo] Br DO, eel SES LES, pre aa mondo inng uay hi ii pisn added miet e Hog 
[i satriy. ema aee pii ama, poia, eir irunu Prey T 
| Merdprin Sera 503 a 


217 June 2006 


pa LL -1 
Ta pura md ¿A 


«An ctra crea at Poin a been added lo Ene 


Fies Errulsto ma 


Web Hoging. 





Este sitio nos ofrece la posibilidad de descargar scripts para PHP, CGI, Java y Java 
Script, etc. Aunque no hay muchos ejemplos, brinda mucha información sobre ellos y 
su forma de implementación, como así también software y herramientas complemen- 
tarias para el mejor desarrollo de nuestros sitios. 


Creamundo 


URL: www.creamundo.com 


O AAA AAA 
dehesa Didon e F"eoto heme Apaña 


a 
(Fee + C) aa E jina 
QU) o rr raro cedo le eee 


AAA AA 


descargas ss gph gralis, recuer 


Pe AE ene Sd eg recuerdo y eN Trobojn 


unite nena! Parana armes muerda a pr] uste av Dancer, El, dede aa has io gr. Paba ua pi. Tur 
gph E-L Igra Ano A Bi Ée nes igp. Prarie pbr. arado; Marca GU ients hal 
mida. com La rbd la A dea 





Esta página ofrece gran cantidad de fuentes ie para descargar. Su mejor carac- 
terística es el rápido acceso que tenemos a las fuentes, su previsualización y su descar- 
ga. Se actualiza periódicamente y organiza las fuentes alfabéticamente. Está en español. 
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LetraManía 


URL: www.letramania.com 


ARA AO T a 
desp Diiin Vea Peavy peep Apals 


Y i h 2% a i - 
ee - e m) (= Lë P 


A o e de AL 


4 i ' 
# è egt. m pebei 


Enin E Wht ia You Fivan 
Fiii Soim? 





Este sitio, al igual que Creamundo, organiza alfabéticamente todas sus fuentes 
tipográficas disponibles. Su ventaja es que presenta una rápida previsualización en 
miniatura de cada fuente en cada categoría. Sitio completamente en español. 


Recursos gratis (fuentes) 


URL: www.recursosgratis.com/fuentesgratis 


AA A A S 
Bahisn Dodan Ye è Peart piep Apals 
Ge- O mias 
A o rr rra nt ale 
AUD? | 
i A 
y] 


pl ES | NN 


DESCARGA +, 
AHORA 0 


AE 


ES 
AO! 


Mina lcd De Priv 1,1 'Hsbialera.. Enea ear ly 
owkbride De Fuertes 1 1 e A Taea 
rapie Miss de MOL OTT 


TE: pl 
ia . Ba d s 


imebadili Fant 
Piel Barcode ln Acce 


ca É ra Cai y. 193 
Frea Dams 





En este sitio podemos encontrar un ordenamiento alfabético de las descargas de 
fuentes y brinda la opción de descargar programas para poder visualizarlas y edi- 
tarlas. Tiene foros de discusión con opiniones acerca de las fuentes y los progra- 
mas. También está en castellano. 
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Font Reactor 


URL: www.fontreactor.com 


A Descatear foros pratl - Covefnactar 


albumes de fotos, stock photos 
hosting de imágenes 





Otro sitio de descarga de tipografías. Éste es muy funcional, ya que además de propo- 
ner las descargas alfabéticamente, nos brinda un panel de acceso rápido a las más po- 
pulares y descargadas. Algunas fuentes están clasificadas por categoría, y permite reali- 
zar búsquedas de fuentes si se conoce su nombre. Está en español. 


101 Free Fonts 
URL: www.1001freefonts.com 


CAT 
Fumador 


hipo) bodas 100) lots Dt 


E 

1001 | Search For Fonts! 
PEE FOHTE — j e 
iaai MAC Fonts Top 20 Fonte 


a 





El tea 
Es un completo sitio de descarga de fuentes organizadas alfabéticamente y con un sis- 
tema de búsqueda para alcanzar nuestro objetivo de forma más sencilla. Hay fuentes 


para PC y para MAC, y un listado de las 20 más descargadas. El sitio está en inglés. 
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DaFont 
URL: www.dafont.com 


dl Demnbad fonts | daloja bom 


hol al Do 
Abhi Ba nanes Alspr- bhiad AF -Hims birja i een 
A sole anil balga hin mhire n ihan ama a Ue 


| Srta l 


ABCDEP EARIIELMNDEGASTUWVWN Y ie 


Wisicema Han pou cam desmiaad borde Po ute A por duaa, reaa Ei 


Han ro ee a Pol ln) 
a Mind: Copy 1 e ta 
s Mar 05 X: Fu Cha biei Maey g PEJ ay 


Last fonts added 


E EI A in 


Desmikiádl 
La į hag OG 
D rrara 


Se trata de un nuevo sitio od: rr de fuentes. Está en inglés pero ofrece una exten- 
sa cantidad de tipografías y una agradable y funcional navegación. Cuenta con ordena- 
miento alfabético, aunque sobresale el listado por categorías que clasifican muy bien las 


fuentes. Además de la descarga de cada fuente para PC, ofrece la alternativa de MAC. 





Free Fonts 


URL: www.free-fonts.com 


ire Fonts EE 
dere  Ddcon Ye Feito ree Apala 


(O res + O 2 Eiaa p ada E) e 


A brena forn ii 


ds yo lodos fa a dona? 
Entes tha fot ries bara ind o dll fir a nl 


Tyra de Pol nar hr Sanch | 


Mhé Feet cos debe porra mora thar PLOOO Party —iruetppa, opaca, parepeript Epa l 
barua Lerga baneh jpet wad thes jmina her Bomis b bi karimi 


La ru hee aag aoa ar 
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Este es un sito en inglés más bien simple, que nos da la posibilidad de descargar ti- 
pografías a nuestro equipo. Posee un excelente sistema de búsqueda y algunas he- 
rramientas para la edición, creación y visualización de las fuentes. 
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Free Web Templates 


URL: www.freewebtemplates.com 
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Este sitio está dedicado a ofrecernos la posibilidad de descargar diseños visuales prede- 
finidos para aplicar a nuestros sitios. Estos son denominados templates (plantillas) y 
pueden estar diseñados en Photoshop, HTML, Fireworks, Flash, etc. Algunos templa- 


tes son gratuitos y otros tendremos que abonarlos para poder usarlos. 


Templates Box 


URL: www.templatesbox.com 
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Templates Box nos Elec una gran cantidad de templates gráficos. En este caso, en su 
mayoría son gratuitos y contamos con atractivos e inmejorables diseños. También brin- 
da otros recursos, como manuales con métodos más sencillos para construir templates. 
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SmartFTP 


URL: www.smartftp.com 
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SmartFTP es un cliente FTP gratuito que podemos descargar desde este, su sitio 
oficial. Las principales características de este programa son las excelentes opciones 
de personalización que ofrece y su integración visual con Windows. 


CuteFTP 


URL: www.cuteftp.com 
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CuteFTP es un producto comercial, pero en el sitio oficial nos ofrece una versión de 
prueba, para evaluar todas las funciones del programa. Sus principales ventajas son 
una sencilla administración de archivos y su buena gestión de downloads y uploads. 
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FTP Explorer 
URL: www.ftpx.com 
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También conocido como FTPX, FTP Explorer es una de las herramientas gra- 
tuitas más utilizadas por usuarios de todo el mundo, debido a que es muy livia- 
na y su utilización es sencilla y práctica. El sitio está en inglés. 


BulletProf FTP 
URL: www.bpftp.com 


eTe Clan MA E EL 
decis miian Ye F"eoto rrenba Apaña 


— dirt Dieze hs Dieii Pesdusi — 


TS BulletProof FTP Client for Windows 


Miir hiami dita ii = pamelia Tri A PS Vert La 


f bhara a war O 
' ALET 


k Å reeet 

Uno de los más completos clientes FTP gratuitos. Posee muchas características que lo 
hacen muy competo, pero que a su vez pueden llegar a tornar al programa un tanto 
complicado. BulletProf FTP posee como propiedades sobresalientes el resumen de des- 
cargas pausadas y el poder establecer un orden determinando sobre ellas. 
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Core FTP 


URL: www.coreftp.com 
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Este programa es un cliente FTP completo que podemos obtener de manera totalmen- 
te gratuita y que ofrece muchas características como métodos de compresión, soporte 
Drag&Drop, resumen de descargas, asignación de permisos (CHMOD), etc. 


Swish 


URL: www.swishzone.com 


F twi A a T E E Eain Et: MAA 
decias pida Ye Piia: Herreria Ayuda 


(He * hal =| j ` e Praia Pirta A misda E "dl 


1 Ei hit A O LL 


ETE aii z 


CELS Piirhe; Hina- 
Pas tn 
de rd 


POH Pre tenier 
arca as or 


Paet paT pi 





Aunque Swish era una aplicación para generar animaciones SWF con textos, actual- 
mente ofrece muchas opciones para trabajar con formatos Flash, como Jukebox (repro- 
ductores de música), Sites (diseño de sitios), Video2 (conversión de video a SWF), Pix 
(álbumes de fotos) o Presenter (conversión de presentaciones PowerPoint a SWF). 
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Arachnophilia 


URL: www.arachnoid.com/arachnophilia 
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Arachnophilia es un programa editor de lenguaje HTML de código abierto y de 
descarga gratuita. Su entorno es sencillo y amigable, pero sólo puede editar el có- 
digo de las páginas, y no ver la edición del diseño en pantalla. 


Alleycode 
URL: www.alleycode.com 
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Otro programa de edición HTML totalmente gratuito. En este caso, las simili- 
tudes con Macromedia Dreamweaver son mayores. Contamos con una vista que 
nos permite ver el diseño y el código al mismo tiempo, con un panel de estilos, 
otro de archivos y acceso a los tags más relevantes del código fuente. 
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Amaya 
URL: www.w3.org/Amaya 
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De todos los mencionados, Amaya es el editor HTML más profesional, ya que ofrece 
una gran cantidad de opciones para desarrolladores, como inclusión de código en 
XML, scripts, edición de atributos, etc. Es multiplataforma y también es gratis. 


GIMP 
URL: www.gimp.org 
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GIMP es un programa de código abierto y multiplataforma. Se trata de un ex- 
celente editor de imágenes, cuya principal característica son los filtros de los que 
dispone para la aplicación de efectos a las imágenes. Para obtener la versión de 


Windows, en el sitio oficial debemos ir al enlace GIMP for Windows. 
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IrfanView 


URL: www.irfanview.com 
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Este programa visualizador de imágenes también es gratuito. Con él podremos acceder 
rápidamente a nuestros archivos gráficos y también organizarlos. Ofrece algunas opcio- 
nes básicas de edición, como recortar las imágenes, rotarlas, redimensionarlas, etc. 


Image After 


URL: www.imageafter.com 
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Básicamente, este sitio es un gran archivo, en el que encontraremos muchísimas 
texturas y fotografías de muy alta calidad. Además, brinda una gran cantidad op- 
ciones de búsqueda y excelentes filtros. 
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A F 
ActionScript 212 Flash Player 213 
ADSL 17 Fotograma clave (Flash) 220 
Anclajes 121 FIP 26 
Apache Server 174 
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ASP 241 GET 193 
GIF 50 
B Google AdSense 264 
Banner 270 Google AdWords 264 
Barra de archivo (Dreamweaver) 81 GoogleRank 261 
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Barra de menús [Fireworks] 60 Hipervínculo 22 
Barra estándar (Fireworks) 60 Hoja de estilo 133 
Barra Insertar [Dreamweaver] 82 Hosting / alojamiento 205 
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L 


Línea de tiempo (Flash) 
LPI 
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Macromedia Dreamweaver 
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Macromedia Flash 

Mapa de contenidos 

Mapa de imágenes 
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META tag 
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Microsoft IIS / Internet Information Server 166 


Motor de búsqueda 
MySQL 


Navegador 
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NIC / Network Information Center 
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PHP 
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Quick Tag Editor 
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R 


Reglas [Dreamweaver] 


Resolución 


Servidor proxy 
Shockwave Flash 
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Spam Page 
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SQL 

SVG 

SWF 


Tabla expandida 

Tablas 
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TCP 

TCP/IP 

Texto alternativo 
Thumbnails / miniaturas 
TIFF 


Tipografía 

U 
UDP 
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V En este libro 


Acceso dial up 
Actualización 
Actualizar 
Ancho de banda 
Archivos 
Archivos adjuntos 
Backup 

Balde de pintura 
Base de datos 
Booteo 
Buscador 
Captura de pantalla 
Carpeta 

Casilla de correo 
CD-ROM 
Chequear 

Chip 

Cibercafé 
Clipboard 
Cliquear 

Colgar 
Controlador 


Correo electrónico 


Descargar programas 


Desfragmentar 
Destornillador 
Disco de inicio 
Disco rígido 
Disquete 
Firewall 
Formatear 
Fuente 

Gabinete 
Grabadora de CD 
Grupo de noticias 





Y Otras formas 


Acceso de marcación 


Filas, Ficheros, Archivos electrónicos 
Archivos anexados o anexos 

Copia de respaldo, Copia de seguridad 
Bote de pintura 


Inicio/Arranque 


Buzón de correo 

Disco compacto 

Checar, Verificar, Revisar 
Pastilla 

Café de Internet 
Portapapeles 

Pinchar 

Trabar 

Adaptador 


Bajar programas, Telecargar programas 


Desarmador 

Disco de arranque 
Disco duro, Disco fijo 
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Cortafuego 


Chasis, Cubierta 


Quemadora de CD 


Equivalencia de términos 


En inglés 


Update, Upgrade 
Refresh 

Bandwidth 

Files 

Attach, Attachment 


Database 
Boot 

Search engine 
Snapshot 
Folder 


Compact disk 
Check 


Tilt 

Driver 

E-Mail, 

Electronic Mail, Mail 
Download 


Defrag 
Startup disk 
Hard disk 
Floppy drive 


Format 
Font 


CD Burn 
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En este libro Otras formas 


Handheld 


Hipertexto 


Computadora de mano 


Hospedaje de sitios 
Hub 


Impresora 


Alojamiento de sitios 


Concentrador 


Inalámbrico 
Libro electrónico 


Lista de correo Lista de distribución 


Motherboard Placa madre, Placa base 

Mouse Ratón 

Navegador 

Notebook Computadora de mano, 
Computadora portátil 

Offline Fuera de línea 

Online En línea 


Página de inicio 


Panel de control 


Parlantes Bocinas, Altavoces 

PE Computador, Ordenador, Computadora 
Personal, Equipo de cómputo 

Pestaña Ficha, Solapa 

Pila Batería 

Placa de sonido 

Plug 8: Play Enchufar y usar 


Por defecto Por predefinición 


Programas Aplicación, Utilitarios 
Protector de pantalla 
Proveedor de acceso 
a Internet 

Puente 


Puerto Serial 


Ranura 

Red 

Servidor 

Sistema operativo SO 

Sitio web Site 

Tarjeta de video Placa de video 

Tipear Teclear, Escribir, Ingresar, Digitar 
Vínculo Liga, Enlace, Hipervínculo, Hiperenlace 
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HyperText 
Hosting 


Printer 
Wireless 
E-Book 
Mailing list 


Browser 


Home page 


Control panel 


Personal Computer 


Battery 
Soundboard 


By default 

Software, Applications 
Screensaver 

Internet Service 
Provider 

Bridge 

Serial Port 

Slot 

Net, Network 

Server 


Operating System (OS) 


Link 





Abreviaturas comúnmente utilizadas 


ABREVIATURAS COMUNMENTE UTILIZADAS 


Y Abreviatura 


ADSL 
AGP 
ANSI 
ASCII 


BASIC 
BIOS 
Bit 
Bps 
CD 
CGI 
CRU 
CRC 
DNS 
DPI 
DVD 
ENE 
GB 
HTML 
HTTP 
IDE 
IEEE 


ISP 
KB 
LAN 
LCD 
BEN 
MB 
MBR 
MHz 





A 

Asymmetric Digital Subscriber Line o Línea de abonado digital asimétrica 
Accelerated Graphic Port o Puerto acelerado para gráficos 
American National Standards Institute 

American Standard Code of Information Interchange 

o Código americano estándar para el intercambio de información 
Beginner's All-Purpose Symbolic Instruction Code 

Basic Input/Output System 

Binary digit (Dígito binario) 

Bits por segundo 

Compact Disk 

Common Gateway Interface 

Central Processing Unit o Unidad central de proceso 

Cyclic Redundancy Checking 

Domain Name System o Sistema de nombres de dominios 
Dots per inch o puntos por pulgada 

Digital Versatile Disc 

File Transfer Protocol o Protocolo de transferencia de archivos 
Gigabyte 

HyperText Mark-up Language 

HyperText Transfer Protocol 

Integrated Device Electronic 

Institute of Electrical and Electronics Engineers 

Internet Protocol 

Infra Red 

Internet Relay Chat 

Interrupt Request Line o Línea de petición de interrupción 
International Organization Standard u Organización de Estándares 
Internacionales 

Internet Service Provider o Proveedor de acceso a Internet 
Kilobyte 

Local Area Network o Red de área local 

Liguid Crystal Display o Pantalla de cristal líquido 

Line Print Terminal 

Megabyte 

Master Boot Record 


Megahertz 
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Y Abreviatura 


NETBEUI 


OEM 
OS 
OSI 
PCMCIA 
PDA 
PDF 
Perl 
PGP 
PHE 
ROR 
PPP 
RAM 
ROM 
SMTP 


SPX/IPX 


SQL 
Sale 
TER 


UML 
UDP 
UPS 
URL 
USB 
VGA 
WAN 
WAP 
WWW 
XML 
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V Definición 

Network Basic Extended User Interface o Interfaz de usuario extendida 
NETBios 

Original Equipment Manufacturer 

Operative System 

Open Systems Interconnection o Interconexión de sistemas abiertos 
Personal Computer Memory Card International Association 

Personal Digital Assistant 

Portable Document Format 

Practical Extraction and Report Language 

Pretty Good Privacy 

Personal Home Page Tools, ahora llamado PHP Hypertext Preprocessor 
Post Office Protocol 3 o versión 3 del Protocolo de oficina de correo 
Point to Point Protocol o Protocolo punto a punto 

Random Access Memory 

Read Only Memory 

Simple Mail Transport Protocol o Protocolo simple 

de transferencia de correo 

Sequence Packet eXchange/Internetwork Packet eXchange o Intercambio 
de paquetes secuenciales/Intercambio de paquetes entre redes 
Structured Query Language 

Secure Socket Layer 

Transfer Control Protocol / Internet Protocol o Protocolo de control de 
transferencia / Protocolo de Internet 

lenguaje de Modelado Unificado 

User Datagram Protocol 

Uninterruptible Power Supply 

Uniform Resource Locator 

Universal Serial Bus 

Video Graphic Array 

Wide Area Network o Red de área extensa 

Wireless Application Protocol 

World Wide Web 

Extensible Markup Language 





CLAVES PARA COMPRAR 
UN LIBRO DE 
COMPUTACION 


Sobre el autor 

y la editorial 
Revise que haya un cuadro 
"sobre el autor", en el que se 
informe sobre su experiencia 
en el tema. En cuanto a la 
editorial, es conveniente que 
sea especializada en 
computación. 


Ale 

al diseño 
Compruebe que el libro tenga 
guías visuales, explicaciones 
PERRE TET KOLEO] 
información adicional y gran 
cantidad de pantallas. Su 
lectura será más ágil y 
atractiva que la de un libro 
UA 


¡ETE 

AS 
Suele haber grandes 
diferencias de precio entre 
libros del mismo tema; si no 
tiene el valor en la tapa, 
pregunte y compare. 


4 ¿Tiene valores 
agregados? 
Desde un sitio exclusivo en la 
Red hasta un CD-ROM, desde 
un Servicio de Atención al 
Lector hasta la posibilidad de 
leer el sumario en la Web 
para evaluar con tranquilidad 
la compra, o la presencia de 
buenos índices temáticos, 
todo suma al valor de un 
¡TA 


5 Verifique 

el idioma 
No sólo el del texto; también 
revise que las pantallas 
incluidas en el libro estén en 
el mismo idioma del 
programa que usted utiliza. 


Revise la fecha 
LWT iTe] g 
Está en letra pequeña en las 
primeras páginas; si es un libro 
traducido, la que vale es la 
fecha de la edición original. 
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Visite nuestro sitio web 


Utilice nuestro sitio usershop.mpediciones.com: 
e Vea información más detallada sobre cada libro de este catálogo. 


e Obtenga un capítulo gratuito para evaluar la posible compra 
de un ejemplar. 

e Conozca qué opinaron otros lectores. 

e Compre los libros sin moverse de su casa y con importantes 
descuentos. 

e Publique su comentario sobre el libro que leyó. 

e Manténgase informado acerca de las últimas novedades 
y los próximos lanzamientos. 


> También puede conseguir nuestros libros en kioscos 
o puestos de periódicos, librerías, cadenas comerciales, 
supermercados y casas de computación. 


Compra Directa! usershop.mpediciones.com 
>> Conéctese con nosotros y obtenga beneficios exclusivos: 
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Implementación y 
debugging 

Éste es un libro fundamental, 
de consulta permanente para 
el desarrollador. En él se 
abordan dos etapas clave del 


ciclo de vida de un software: la 


implementación de un 
proyecto y su debugging. 


COLECCIÓN: MANUALES USERS.CODE 





El Gran Libro del Software 
En este libro encontrará los 
tutoriales de las mejores 
herramientas, trucos y secretos 
para aprovechar al máximo su 
computadora. Explicaciones 
detalladas, con divisiones por 
categorías para facilitar el 
aprendizaje de las distintas 


áreas de la informática actual. 
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PHP 


EVOLUCIÓN Y MAD 


PHP5 

PHP es uno de los lenguajes de 
programación elegidos a nivel 
mundial para el desarrollo de 
sitios web. Este manual brinda 
el conocimiento para 
comprender las mejoras 
introducidas en esta versión 

y aplicarlas en los proyectos. 
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Freeware 

Una recopilación de los 
mejores programas de licencia 
libre, explicados en detalle. 
Guías visuales y procedimientos 
paso a paso para llevar el uso 
de la PC a una nueva 
dimensión. Además, en el CD 
incluido en el libro encontrará 
los programas listos para su 
instalación. 
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Como proteger la PC 

Virus, spyware, troyanos y 
muchas amenazas más circulan 
por la Web buscando nuevas 
víctimas. ¿Cómo evitar 
intrusiones? ¿Cómo eliminar el 
spam? En este libro, las 
respuestas a estas preguntas. 
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256 páginas que lo 
introducirán en el mundo 

de la informática. Sepa cómo 
manejarse en el entorno 
Windows, y aprenda a 
configurar sus principales 
elementos y aplicaciones. 
Entienda cómo funcionan 

la PC y sus componentes. 


COLECCIÓN: MI PC 


Hi Un servicio exclusivo para responder a sus consultas sobre nuestros productos 


¡GRATIS LÉALO ANTES! 


>> En nuestro sitio puede obtener GRATIS un capítulo del libro que quiera. 
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Linux para todos 

¡Esta obra explica, desde cero, 
¡cómo instalar y configurar 
Linux en nuestra PC. 
Personalización, optimización, 
| mantenimiento, seguridad, las 
¡mejores aplicaciones y mucho 
más. ¡Llegó el momento de 
dar el gran paso! 
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XML 

Este libro introduce al 
programador en los conceptos 
fundamentales de XML para 
crear documentos sólidos o 
construir y complementar 
aplicaciones. Una obra que 
apunta a lograr que el lector 
pueda visualizar y aplicar todas 
las ventajas de este 
metalenguaje. 
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Computación para fanáticos 
256 páginas destinadas a 
conocer los secretos para elegir 
e instalar dispositivos, descubrir 
las mejores opciones para 
optimizar el sistema operativo 
y hacer que nuestra PC vuele. 

El libro perfecto para quienes 
no nos conformamos con usar 
la PC, sino que queremos usarla 
al límite todo el tiempo. 
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El Gran Libro de la 
Programación 

Todas las plataformas, lenguajes 
y recursos. Una obra 
imprescindible en la que se 
estudian las problemáticas 
actuales de los principales 
paradigmas de la programación, 
junto con las arquitecturas y 
metodologías más utilizadas. 
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Programación web Java 

Este libro brinda las 
| herramientas necesarias para 
| convertirse en un verdadero 
experto en el desarrollo de 
aplicaciones web con Java. 
| Orientado a todos aquellos 
desarrolladores que posean 
conocimientos de programación 
orientada a objetos. 


COLECCIÓN: MANUALES USERS.CODE 








W INSTALACIÓN 


daralan 


AL 0 SIIA 





El Gran Libro de Linux 

Un material imperdible sobre el 
paradigma que está 
amenazando el reinado de las 
grandes corporaciones. 256 
páginas a todo color ideales 
| para aprender a instalar el 

| sistema operativo y configurar 
cada dispositivo, descubrir cómo 


| optimizar el sistema y obtener 


el máximo rendimiento. 
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PC Soluciones 

Descubra las herramientas que 
le permitirán obtener la máxima 
productividad en la oficina, 
desarrollar emprendimientos 
personales y trabajar en equipo. 
Destinada a quienes usan la PC 
para trabajar y estudiar. Una 
obra compuesta por ideas 
prácticas, proyectos y 
actividades de gran utilidad. 
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Office Total 

Una colección de proyectos 
y actividades pensada para 
adquirir nuevas habilidades 
y agilizar las tareas diarias, 
al mismo tiempo que se 
aprende a manejar Excel, 
Word, Outlook, Access 

y PowerPoint. 
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Consejos de Superplanilla 
Una recopilación de las dudas 
más interesantes enviadas por 
usuarios de Excel a la sección 


Más de 200 preguntas con sus 
respectivas respuestas, en las 
que se brinda el conocimiento 
necesario para convertirse 

en un experto. 
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Wireless 

Un recorrido por los 
fundamentos de esta 
tecnología, el hardware 
necesario, los estándares 
inalámbricos y los pasos para 
efectuar una instalación de 
manera eficiente y segura. 
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Armado de PC 

Un libro único con 400 páginas 
a todo color, donde se detalla, 
paso por paso, cómo instalar 

y configurar de forma 
profesional los componentes 
internos de la PC. Además, se 
brindan soluciones a los 
problemas más frecuentes. 
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Project Management 

Un libro que le permitirá 
adquirir las habilidades y las 
técnicas necesarias para cumplir 
con las especificaciones de un 
proyecto. Una por una, se 
explican todas las técnicas para 
planificar, ejecutar, administrar 
y liderar un proyecto 
eficientemente. 
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Hi Un servicio exclusivo para responder a sus consultas sobre nuestros productos 


Utilice nuestro sitio, obtenga información más detallada sobre cada 
libro y manténgase al tanto de las últimas novedades. 
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SQL Server 

Una obra que recorre los 
fundamentos teóricos y 
prácticos necesarios para el 
desarrollo y la implementación 
de una base de datos en SQL 
Server 2005. Basada en miles 
de horas de experiencia en el 
diseño y la implementación de 
bases de datos. 
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Seguridad informática 

En este libro se explican los 
conceptos clave que hacen a 

la planificación, el diseño y la 
implementación eficiente de 
un plan de seguridad: políticas, 
dispositivos y metodologías 
para el diseño de una red libre 
de ataques. 
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El Gran Libro del Hardware 
Basado en una selección de las 
mejores notas de Power, ésta es 


una obra única e imprescindible, 


con 256 páginas a todo color 
donde se examinan cada uno 
de los componentes internos de 
la PC, y las claves para optimizar 
el sistema y obtener el máximo 
rendimiento. 
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Windows XP Total 

Domine el sistema operativo 
más popular, de la mano de 
este libro que lo llevará a 
conocer todos y cada uno de 
sus secretos: descubra cómo 
configurar, personalizar y 
optimizar su sistema al máximo 
en esta obra única de más de 
400 páginas. 
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Proyectos con PHP 

Siete proyectos listos para 
implementar: un weblog, 

un foro de discusión, un álbum 
de fotografías, un calendario 
web, un sistema de encuestas 
online, un servicio de postales 
electrónicas y un sistema de 
búsqueda por directorio. 
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Aprenda a grabar. editar 
| y procesar sonido en la PL 


Audio digital 


Conozca los secretos para 
convertir su PC en un estudio 
de grabación virtual. 
Fundamentos teóricos y 
prácticos, el hardware 
indispensable, y las técnicas 
para operar dos de los mejores 
programas de grabación y 


¡edición: Sound Forge y Vegas. 
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PHP y MySQL Flash Master Desarrollos móviles con .NET 





Éste es un libro que llevará al A partir de la propuesta del Conceptos fundamentales que 
lector a afianzarse tanto en el desarrollo de siete proyectos hacen al desarrollo de 
manejo como en las diversas interactivos, este libro se aplicaciones para dispositivos 
utilidades prácticas que pueden presenta como la oportunidad móviles, como celulares o PDAs, 
lograrse a partir de la más clara de descubrir todo el a través de ASP.NET Mobile y 
combinación de dos de las potencial de Flash. Cada .NET Compact Framework. Las 
herramientas de desarrollo más proyecto combina las claves para quienes recién se 
poderosas: PHP y MySQL. herramientas de Flash con su introducen en el desarrollo de 
lenguaje nativo: ActionScript. aplicaciones móviles y las 
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herramientas para los que 
quieren profesionalizarse. 
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Técnicas de programación 


Estadística aplicada 








En las páginas de este manual ¡Esta obra se introduce en a los negocios utilizando 
encontrará las bases para la ¡los fundamentos teóricos Microsoft Excel 
implementación de los | y prácticos del lenguaje, Este libro busca introducir al 
algoritmos de programación. ¡explorando cada una de las lector en los conceptos 
Incluye dos capítulos | herramientas y las claves que fundamentales que hacen a 
dedicados a los principios de ¡lo ayudarán a escribir código esta ciencia, desarrollando la 
la programación orientada a len forma clara, correcta y teoría y su aplicación con 
objetos y la programación | robusta. Con este libro, ejemplos concretos a través 
funcional. podrá alcanzar el dominio de las funciones de Excel. 
E ( ¡total de esta tecnología. - 
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CLAVES PARA COMPRAR 
UN LIBRO DE 
COMPUTACION 


Sobre el autor 

y la editorial 
Revise que haya un cuadro 
"sobre el autor", en el que se 
informe sobre su experiencia 
en el tema. En cuanto a la 
editorial, es conveniente que 
sea especializada en 
computación. 


AE le 

al diseño 
Compruebe que el libro tenga 
guías visuales, explicaciones 
PERO TET KOLEO] 
información adicional y gran 
cantidad de pantallas. Su 
lectura será más ágil y 
atractiva que la de un libro 
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AS 
Suele haber grandes 
diferencias de precio entre 
libros del mismo tema; si no 
tiene el valor en la tapa, 
pregunte y compare. 


Ya ¿Tiene valores 
agregados? 
Desde un sitio exclusivo en la 
Red hasta un CD-ROM, desde 
un Servicio de Atención al 
Lector hasta la posibilidad de 
leer el sumario en la Web 
para evaluar con tranquilidad 
la compra, o la presencia de 
buenos índices temáticos, 
todo suma al valor de un 
¡TA 


5 Verifique 

el idioma 
No sólo el del texto; también 
revise que las pantallas 
incluidas en el libro estén en 
el mismo idioma del 
programa que usted utiliza. 


Revise la fecha 
LWT] g 
Está en letra pequeña en las 
primeras páginas; si es un libro 
traducido, la que vale es la 
fecha de la edición original. 
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Visite nuestro sitio web 


Utilice nuestro sitio usershop.mpediciones.com: 
e Vea información más detallada sobre cada libro de este catálogo. 


e Obtenga un capítulo gratuito para evaluar la posible compra 
de un ejemplar. 

e Conozca qué opinaron otros lectores. 

e Compre los libros sin moverse de su casa y con importantes 
descuentos. 

e Publique su comentario sobre el libro que leyó. 

e Manténgase informado acerca de las últimas novedades 
y los próximos lanzamientos. 


> También puede conseguir nuestros libros en kioscos 
o puestos de periódicos, librerías, cadenas comerciales, 
supermercados y casas de computación. 
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Implementación y 
debugging 

Éste es un libro fundamental, 
de consulta permanente para 
el desarrollador. En él se 
abordan dos etapas clave del 
ciclo de vida de un software: la 
implementación de un 
proyecto y su debugging. 
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El Gran Libro del Software 
En este libro encontrará los 
tutoriales de las mejores 
herramientas, trucos y secretos 
para aprovechar al máximo su 
computadora. Explicaciones 
detalladas, con divisiones por 
categorías para facilitar el 
aprendizaje de las distintas 
áreas de la informática actual. 
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PHP es uno de los lenguajes de 
programación elegidos a nivel 
mundial para el desarrollo de 
sitios web. Este manual brinda 
el conocimiento para 
comprender las mejoras 
introducidas en esta versión 

y aplicarlas en los proyectos. 
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Freeware 

Una recopilación de los 
mejores programas de licencia 
libre, explicados en detalle. 
Guías visuales y procedimientos 
paso a paso para llevar el uso 
de la PC a una nueva 
dimensión. Además, en el CD 
incluido en el libro encontrará 
los programas listos para su 
instalación. 
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Como proteger la PC 
Virus, spyware, troyanos y 
muchas amenazas más circulan 
por la Web buscando nuevas 
víctimas. ¿Cómo evitar 
intrusiones? ¿Cómo eliminar el 
spam? En este libro, las 
respuestas a estas preguntas. 





COLECCIÓN: MANUALES USERS 





256 páginas que lo 
introducirán en el mundo 

de la informática. Sepa cómo 
manejarse en el entorno 
Windows, y aprenda a 
configurar sus principales 
elementos y aplicaciones. 
Entienda cómo funcionan 

la PC y sus componentes. 
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Hi Un servicio exclusivo para responder a sus consultas sobre nuestros productos 


¡GRATIS LÉALO ANTES! 


>> En nuestro sitio puede obtener GRATIS un capítulo del libro que quiera. 
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Linux para todos 

Esta obra explica, desde cero, 
cómo instalar y configurar 
Linux en nuestra PC. 
Personalización, optimización, 
mantenimiento, seguridad, las 
mejores aplicaciones y mucho 
más. ¡Llegó el momento de 
dar el gran paso! 
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| XIML 
Este libro introduce al 
programador en los conceptos 

¡fundamentales de XML para 

| crear documentos sólidos o 
construir y complementar 
aplicaciones. Una obra que 

| apunta a lograr que el lector 

| pueda visualizar y aplicar todas 
las ventajas de este 
metalenguaje. 
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Computación para fanáticos 
256 páginas destinadas a 
conocer los secretos para elegir 
e instalar dispositivos, descubrir 
las mejores opciones para 
optimizar el sistema operativo 
y hacer que nuestra PC vuele. 
El libro perfecto para quienes 
no nos conformamos con usar 
la PC, sino que queremos usarla 
al límite todo el tiempo. 
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El Gran Libro de la 
Programación 

Todas las plataformas, lenguajes 
y recursos. Una obra 
imprescindible en la que se 
estudian las problemáticas 
actuales de los principales 
paradigmas de la programación, 
junto con las arquitecturas y 
metodologías más utilizadas. 
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Programación web Java 

Este libro brinda las 
herramientas necesarias para 
convertirse en un verdadero 
experto en el desarrollo de 
aplicaciones web con Java. 
Orientado a todos aquellos 
desarrolladores que posean 
conocimientos de programación 
orientada a objetos. 
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El Gran Libro de Linux 

Un material imperdible sobre el 
paradigma que está 
amenazando el reinado de las 
¡grandes corporaciones. 256 
¡páginas a todo color ideales 
¡para aprender a instalar el 

| ¡sistema operativo y configurar 
cada dispositivo, descubrir cómo 
‘optimizar el sistema y obtener 
el máximo rendimiento. 
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PC Soluciones 

Descubra las herramientas que 
le permitirán obtener la máxima 
productividad en la oficina, 
desarrollar emprendimientos 
personales y trabajar en equipo. 
Destinada a quienes usan la PC 
para trabajar y estudiar. Una 
obra compuesta por ideas 
prácticas, proyectos y 
actividades de gran utilidad. 
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Office Total 

Una colección de proyectos 
y actividades pensada para 
adquirir nuevas habilidades 
y agilizar las tareas diarias, 
al mismo tiempo que se 
aprende a manejar Excel, 
Word, Outlook, Access 

y PowerPoint. 
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Consejos de Superplanilla 
Una recopilación de las dudas 
más interesantes enviadas por 
usuarios de Excel a la sección 


Superplanilla de la revista Users. 


Más de 200 preguntas con sus 
respectivas respuestas, en las 
que se brinda el conocimiento 
necesario para convertirse 

en un experto. 


COLECCIÓN: MANUALES USERS 


WEA : aa) 
WIRELESS 


-La revolución inatámbrica 


GUÍA TEÓRICA Y PRÁCTICA 


El hardware necesaria | Los estándares 
Lainstalación pasó pess 
Claves para implermariar i Ti dagi 
Muli ra l Wi-Fi y Butte ith 





Wireless 

Un recorrido por los 
fundamentos de esta 
tecnología, el hardware 
necesario, los estándares 
inalámbricos y los pasos para 
efectuar una instalación de 
manera eficiente y segura. 
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Armado de PC 

Un libro único con 400 páginas 
a todo color, donde se detalla, 
paso por paso, cómo instalar 

y configurar de forma 
profesional los componentes 
internos de la PC. Además, se 
brindan soluciones a los 
problemas más frecuentes. 
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Project Management 

Un libro que le permitirá 
adquirir las habilidades y las 
técnicas necesarias para cumplir 
con las especificaciones de un 
proyecto. Una por una, se 
explican todas las técnicas para 
planificar, ejecutar, administrar 
y liderar un proyecto 
eficientemente. 
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SQL Server 

Una obra que recorre los 
fundamentos teóricos y 
prácticos necesarios para el 
desarrollo y la implementación 
de una base de datos en SQL 
Server 2005. Basada en miles 
de horas de experiencia en el 
diseño y la implementación de 
bases de datos. 
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Seguridad informática 

En este libro se explican los 
conceptos clave que hacen a 

la planificación, el diseño y la 
implementación eficiente de 
un plan de seguridad: políticas, 
dispositivos y metodologías 
para el diseño de una red libre 
de ataques. 
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El Gran Libro del Hardware 
Basado en una selección de las 
mejores notas de Power, ésta es 
una obra única e imprescindible, 
con 256 páginas a todo color 
donde se examinan cada uno 

de los componentes internos de 
la PC, y las claves para optimizar 
el sistema y obtener el máximo 
rendimiento. 
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Windows XP Total 

Domine el sistema operativo 
más popular, de la mano de 
este libro que lo llevará a 
conocer todos y cada uno de 
sus secretos: descubra cómo 
configurar, personalizar y 
optimizar su sistema al máximo 
en esta obra única de más de 
400 páginas. 
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Proyectos con PHP 

Siete proyectos listos para 
implementar: un weblog, 

un foro de discusión, un álbum 
de fotografías, un calendario 
web, un sistema de encuestas 
online, un servicio de postales 
electrónicas y un sistema de 
búsqueda por directorio. 
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Conozca los secretos para 
convertir su PC en un estudio 
de grabación virtual. 
Fundamentos teóricos y 
prácticos, el hardware 
indispensable, y las técnicas 
para operar dos de los mejores 
programas de grabación y 


edición: Sound Forge y Vegas. 
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PHP y MySQL 

Éste es un libro que llevará al 
lector a afianzarse tanto en el 
manejo como en las diversas 
utilidades prácticas que pueden 
lograrse a partir de la 
combinación de dos de las 
herramientas de desarrollo más 
poderosas: PHP y MySQL. 
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Técnicas de programación 
En las páginas de este manual 
encontrará las bases para la 
implementación de los 
algoritmos de programación. 
Incluye dos capítulos 
dedicados a los principios de 
la programación orientada a 
objetos y la programación 
funcional. 
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Flash Master 

A partir de la propuesta del 
desarrollo de siete proyectos 
interactivos, este libro se 
presenta como la oportunidad 
más clara de descubrir todo el 
potencial de Flash. Cada 
proyecto combina las 
herramientas de Flash con su 
lenguaje nativo: ActionScript. 
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Esta obra se introduce en 

los fundamentos teóricos 

y prácticos del lenguaje, 
explorando cada una de las 
herramientas y las claves que 
lo ayudarán a escribir código 
en forma clara, correcta y 
robusta. Con este libro, 
podrá alcanzar el dominio 
total de esta tecnología. 
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Desarrollos móviles con .NET 
Conceptos fundamentales que 
hacen al desarrollo de 
aplicaciones para dispositivos 
móviles, como celulares o PDAs, 
a través de ASP.NET Mobile y 
.NET Compact Framework. Las 
claves para quienes recién se 
introducen en el desarrollo de 
aplicaciones móviles y las 
herramientas para los que 
quieren profesionalizarse. 
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Estadística aplicada 
a los negocios utilizando 
Microsoft Excel 

Este libro busca introducir al 
lector en los conceptos 
fundamentales que hacen a 
esta ciencia, desarrollando la 
teoría y su aplicación con 
ejemplos concretos a través 
de las funciones de Excel. 
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